/*
==========================================================================
ROBEUS COSMETICS - FONT STYLES
Sistema completo di tipografia con variabili CSS e utility classes
==========================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap');

/* 3. Uso della variabile */
:root {
  /* Font Family */
  --font-primary: 'Nunito Sans', sans-serif !important;
  --font-secondary: 'Nunito Sans', sans-serif !important;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  
  /* Font Sizes - Mobile First */
 /* da 12 → 14px */
  --text-xs:   0.875rem !important;   /* 14px */
  /* da 14 → 16px */
  --text-sm:   1rem    !important;     /* 16px */
  /* da 16 → 18px */
  --text-base: 1.125rem !important;    /* 18px */
  /* da 18 → 20px */
  --text-lg:   1.25rem  !important;    /* 20px */
  /* da 20 → 24px */
  --text-xl:   1.5rem   !important;    /* 24px */
  /* da 24 → 30px */
  --text-2xl:  1.875rem !important;    /* 30px */
  /* da 30 → 36px */
  --text-3xl:  2.25rem  !important;    /* 36px */
  /* da 36 → 48px */
  --text-4xl:  3rem     !important;    /* 48px */
  /* da 48 → 64px */
  --text-5xl:  4rem     !important;    /* 64px */
  /* da 60 → 80px (un po’ di extra più su) */
  --text-6xl:  5rem     !important;    /* 80px */
  
  /* Line Heights */
  --leading-none: 1 !important;
  --leading-tight: 1.2 !important;
  --leading-snug: 1.375 !important;
  --leading-normal: 1.5 !important;
  --leading-relaxed: 1.6 !important;
  --leading-loose: 2 !important;
  
  /* Font Weights */
  --weight-thin: 100 !important;
  --weight-light: 300 !important;
  --weight-normal: 400 !important;
  --weight-medium: 500 !important;
  --weight-semibold: 600 !important;
  --weight-bold: 700 !important;
  --weight-extrabold: 800 !important;
  --weight-black: 900 !important;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em !important;
  --tracking-tight: -0.025em !important;
  --tracking-normal: 0em !important;
  --tracking-wide: 0.025em !important;
  --tracking-wider: 0.05em !important;
  --tracking-widest: 0.1em !important;
  
  /* Spacing System - Mobile First */
  --spacing-xs: 0.5rem !important;    /* 8px */
  --spacing-sm: 0.75rem !important;   /* 12px */
  --spacing-md: 1rem !important;      /* 16px */
  --spacing-lg: 1.5rem !important;    /* 24px */
  --spacing-xl: 2rem !important;      /* 32px */
  --spacing-2xl: 2.5rem !important;   /* 40px */
  --spacing-3xl: 3rem !important;     /* 48px */
  --spacing-4xl: 4rem !important;     /* 64px */
  --spacing-5xl: 5rem !important;     /* 80px */
  
  /* Color System */
  --color-primary: #d32f2f !important;        /* Robeus red */
  --color-primary-dark: #b71c1c !important;   /* Darker red for hover */
  --color-primary-light: #ffcdd2 !important;  /* Light red for focus */
  --color-black: #000000 !important;
  --color-white: #ffffff !important;
  --color-text: #333333 !important;
  --color-text-light: #555555 !important;
  --color-text-muted: #666666 !important;
  
  /* Border & Radius */
  --border-radius: 4px !important;
  --border-radius-lg: 8px !important;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
  --shadow-primary: 0 4px 15px rgba(211, 47, 47, 0.3) !important;
  
  /* Transitions */
  --transition-fast: 0.15s ease !important;
  --transition-normal: 0.3s ease !important;
  --transition-slow: 0.5s ease !important;
}

/* ========================================
   HEADING CLASSES - H1 TO H6
======================================== */

/* H1 - Main Titles */
.text-h1,
.heading-1 {
  font-family: var(--font-primary) !important;
  font-size: var(--text-6xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-text, black) !important;
  margin: 0 0 1rem !important;
}

/* H2 - Section Titles */
.text-h2,
.heading-2 {
  font-family: var(--font-primary) !important;
  font-size: var(--text-3xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-normal) !important;
  text-transform: uppercase !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 1rem !important;
}

/* H3 - Subsection Titles */
.text-h3,
.heading-3 {
  font-family: var(--font-primary) !important;
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 0.75rem !important;
}

/* H4 - Card Titles */
.text-h4,
.heading-4 {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xl) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 0.5rem !important;
}

/* H5 - Small Titles */
.text-h5,
.heading-5 {
  font-family: var(--font-primary) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 0.5rem !important;
}

/* H6 - Micro Titles */
.text-h6,
.heading-6 {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 0.5rem !important;
}

/* ========================================
   BODY TEXT CLASSES
======================================== */

/* Lead Text - Intro paragraphs */
.text-lead {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xl) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 1rem !important;
}

/* Body Text - Standard paragraphs */
.text-body,
.text-base {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 1rem !important;
}

/* Large Text */
.text-large,
.text-lg {
  font-family: var(--font-primary) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 1rem !important;
}

/* Small Text */
.text-small,
.text-sm {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 0.75rem !important;
}

/* Extra Small Text */
.text-xs {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text, #333) !important;
  margin: 0 0 0.5rem !important;
}

.text-form {
    margin-bottom: 30px;
    color: #666;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   UTILITY CLASSES - FONT WEIGHTS
======================================== */

.font-thin { font-weight: var(--weight-thin) !important; }
.font-light { font-weight: var(--weight-light) !important; }
.font-normal { font-weight: var(--weight-normal) !important; }
.font-medium { font-weight: var(--weight-medium) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-bold { font-weight: var(--weight-bold) !important; }
.font-extrabold { font-weight: var(--weight-extrabold) !important; }
.font-black { font-weight: var(--weight-black) !important; }

/* ========================================
   UTILITY CLASSES - FONT STYLES
======================================== */

.text-italic { font-style: italic !important; }
.text-normal { font-style: normal !important; }

/* ========================================
   UTILITY CLASSES - TEXT TRANSFORM
======================================== */

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }

/* ========================================
   UTILITY CLASSES - TEXT ALIGNMENT
======================================== */

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* ========================================
   UTILITY CLASSES - LINE HEIGHTS
======================================== */

.leading-none { line-height: var(--leading-none) !important; }
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-snug { line-height: var(--leading-snug) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
.leading-loose { line-height: var(--leading-loose) !important; }

/* ========================================
   UTILITY CLASSES - LETTER SPACING
======================================== */

.tracking-tighter { letter-spacing: var(--tracking-tighter) !important; }
.tracking-tight { letter-spacing: var(--tracking-tight) !important; }
.tracking-normal { letter-spacing: var(--tracking-normal) !important; }
.tracking-wide { letter-spacing: var(--tracking-wide) !important; }
.tracking-wider { letter-spacing: var(--tracking-wider) !important; }
.tracking-widest { letter-spacing: var(--tracking-widest) !important; }

/* ========================================
   SPECIAL TEXT CLASSES
======================================== */

/* Muted Text */
.text-muted {
  font-family: var(--font-primary) !important;
  color: var(--color-text-muted, #666) !important;
  opacity: 0.7 !important;
}

/* Light Text */
.text-light {
  font-family: var(--font-primary) !important;
  color: var(--color-text-light, #555) !important;
}

/* Quote Text */
.text-quote {
  font-family: var(--font-primary) !important;
  font-style: italic !important;
  quotes: "\201C" "\201D" !important;
  position: relative !important;
}

.text-quote:before {
  content: open-quote !important;
}

.text-quote:after {
  content: close-quote !important;
}

/* Button Text */
.text-button {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-none) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
}

/* Caption Text */
.text-caption {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text-muted, #666) !important;
}

/* Label Text */
.text-label {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--color-text, #333) !important;
}

/* ========================================
   RESPONSIVE TYPOGRAPHY
======================================== */

/* Mobile Adjustments */
@media (max-width: 768px) {
  .text-h1, .heading-1 {
    font-size: 36px !important;
  }
  
  .text-h2, .heading-2 {
    font-size: var(--text-2xl) !important;
  }
  
  .text-h3, .heading-3 {
    font-size: var(--text-xl) !important;
  }
  
  .text-lead {
    font-size: var(--text-base) !important;
  }
}

/* Tablet Adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .text-h1, .heading-1 {
    font-size: var(--text-4xl) !important;
  }
  
  .text-h2, .heading-2 {
    font-size: var(--text-3xl) !important;
  }
}

/* Desktop Large */
@media (min-width: 1200px) {
  .text-h1, .heading-1 {
    font-size: var(--text-5xl) !important;
  }
  
  .text-h2, .heading-2 {
    font-size: var(--text-4xl) !important;
  }
}

/* ========================================
   SPECIAL CONTEXT CLASSES
======================================== */

/* Hero Section Text */
.text-hero {
  font-family: var(--font-primary) !important;
  font-size: var(--text-5xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
}

/* Section Title */
.text-section-title {
  font-family: var(--font-primary) !important;
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 0 2rem !important;
}

/* Navigation Text */
.text-nav {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  line-height: var(--leading-none) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
}

/* Footer Text */
.text-footer {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-relaxed) !important;
  letter-spacing: var(--tracking-normal) !important;
  color: var(--color-text-muted, #666) !important;
}

/* Breadcrumb Text */
.text-breadcrumb {
  font-family: var(--font-primary) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-normal) !important;
  line-height: var(--leading-normal) !important;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted, #666) !important;
}

/* ========================================
   UTILITY CLASSES - FONT FAMILIES
======================================== */

.font-primary { font-family: var(--font-primary) !important; }
.font-secondary { font-family: var(--font-secondary) !important; }
.font-system { font-family: var(--font-system) !important; }

/* ========================================
   BASE HTML ELEMENTS - FONT FAMILY
======================================== */

/* Apply primary font to all headings and text elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary) !important;
}

p {
  font-family: var(--font-primary) !important;
}

a {
  font-family: var(--font-primary) !important;
}


/* ========================================
   UTILITY CLASSES - TEXT COLORS
======================================== */

.intro-section {
  padding: 4rem 2rem !important;
  margin-bottom: 4rem !important;
  font-family: var(--font-primary) !important;
  text-align: center !important;
}

@media (max-width: 768px) {
  .intro-section {
    padding: 3rem 1.5rem !important;
    margin-bottom: 3rem !important;
  }
}

@media (min-width: 1200px) {
  .intro-section {
    padding: 6rem 4rem !important;
    margin-bottom: 5rem !important;
  }
}