/* ==========================================================================
   DESIGN TOKENS — Semplicemente Uomo
   Palette: Light Italian Craftsmanship Editorial
   Ispirazione: carta italiana, bottega artigianale, bianco caldo non clinico.
   Accento gold invariato — #B8934F, champagne/ottone.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     COLOR
     -------------------------------------------------------------------------- */

  /* Base surfaces — caldi, non bianchi puri */
  --color-bg:            #F7F3EC;   /* carta da lettere italiana */
  --color-surface-1:     #FFFFFF;   /* card, sezioni alternate */
  --color-surface-2:     #EDE8DF;   /* bordi, separatori */
  --color-surface-3:     #E5DFD3;   /* hover states superfici */

  /* Gold — champagne/brass sobrio, confermato */
  --color-gold:          #B8934F;
  --color-gold-light:    #C9A96E;   /* hover gold */
  --color-gold-dim:      #C9A96E;   /* gold più visibile su chiaro */
  --color-gold-muted:    rgba(184, 147, 79, 0.10); /* bg sottile dorato */

  /* Text — scuri, caldi, non nero puro */
  --color-text-primary:  #191510;   /* quasi nero con sottotono caldo */
  --color-text-secondary:#6B5E54;   /* grigio caldo medio */
  --color-text-tertiary: #A89D93;   /* hint, placeholder */
  --color-text-inverse:  #F7F3EC;   /* testo su sfondo gold/scuro */

  /* Semantic */
  --color-border:        rgba(25, 21, 16, 0.10);
  --color-border-gold:   rgba(184, 147, 79, 0.35);
  --color-overlay:       rgba(25, 21, 16, 0.55);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     -------------------------------------------------------------------------- */

  /* Families */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-ui:       'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Scale — Major Third (1.250) con salti editoriali intenzionali */
  --text-xs:    0.625rem;    /* 10px — eyebrow small caps stretto */
  --text-sm:    0.75rem;     /* 12px — caption, label */
  --text-base:  1rem;        /* 16px — corpo */
  --text-md:    1.125rem;    /* 18px — lead/intro */
  --text-lg:    1.5rem;      /* 24px — H3 */
  --text-xl:    2rem;        /* 32px — H2 */
  --text-2xl:   2.75rem;     /* 44px — H1 sezioni */
  --text-3xl:   4rem;        /* 64px — hero secondario */
  --text-4xl:   6rem;        /* 96px — display hero desktop */
  --text-5xl:   9rem;        /* 144px — numero decorativo, nome grande */

  /* Weights */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;

  /* Line heights */
  --leading-none:   1;
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;
  --leading-reading: 1.65;  /* per paragrafi lunghi */

  /* Letter spacing */
  --tracking-tightest: -0.04em;  /* titoli display grandi */
  --tracking-tight:    -0.02em;  /* H1, H2 */
  --tracking-normal:    0em;
  --tracking-wide:      0.08em;  /* eyebrow uppercase */
  --tracking-widest:    0.15em;  /* small caps spaziosi */
  --tracking-ultra:     0.25em;  /* ornamenti decorativi */

  /* --------------------------------------------------------------------------
     SPACING — scala 4px base, progressione × 1.5 per salti grandi
     -------------------------------------------------------------------------- */

  --space-1:    0.25rem;    /* 4px */
  --space-2:    0.5rem;     /* 8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */
  --space-40:   10rem;      /* 160px */
  --space-48:   12rem;      /* 192px */

  /* Section padding — responsive tramite clamp */
  --section-padding-y: clamp(var(--space-12), 6vw, var(--space-24));
  --section-padding-x: clamp(var(--space-6),  5vw,  var(--space-20));

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */

  --max-width:       1440px;
  --max-width-text:  720px;   /* larghezza max colonne di testo */
  --max-width-wide:  1200px;  /* contenuto wide ma non full */

  /* --------------------------------------------------------------------------
     BORDER RADIUS
     -------------------------------------------------------------------------- */

  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;

  /* --------------------------------------------------------------------------
     TRANSITIONS & EASING
     -------------------------------------------------------------------------- */

  /* Durate */
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    600ms;
  --duration-glacial: 1200ms;

  /* Easing — curva editoriale: entra lenta, esce veloce */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.76, 0, 0.24, 1);
  --ease-linear:    linear;

  /* Transition shorthand */
  --transition-base:  var(--duration-base) var(--ease-out-quart);
  --transition-slow:  var(--duration-slow) var(--ease-out-expo);

  /* --------------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  50;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}