/* ============================================================
   ORIA TOSCANA — Design Tokens
   oriatoscana.com · 2026
   ============================================================ */

:root {
  /* ─── Color Palette ─── */
  --ink:          #1a1208;
  --ink-light:    #2c1f0f;
  --ink-mid:      #3d2e18;
  --gold:         #b5862a;
  --gold-light:   #c99a38;
  --gold-dim:     rgba(181, 134, 42, 0.15);
  --gold-faint:   rgba(181, 134, 42, 0.06);
  --cream:        #f5f0e8;
  --cream-warm:   #ede5d0;
  --parchment:    #faf7f1;
  --text:         #e8d5b0;
  --text-muted:   rgba(232, 213, 176, 0.55);
  --text-faint:   rgba(232, 213, 176, 0.30);
  --border:       rgba(181, 134, 42, 0.12);
  --border-mid:   rgba(181, 134, 42, 0.25);

  /* Light section variants */
  --l-ink:        #1a1208;
  --l-gold:       #8a640f;
  --l-text:       #2c1f0f;
  --l-text-muted: rgba(44, 31, 15, 0.60);
  --l-border:     rgba(138, 100, 15, 0.15);

  /* ─── Typography ─── */
  --ff-serif:     'Cormorant Garamond', 'Georgia', serif;
  --ff-sans:      'Jost', 'Inter', system-ui, sans-serif;
  --ff-mono:      'Courier New', monospace;

  --fs-xs:        0.6875rem;   /* 11px */
  --fs-sm:        0.75rem;     /* 12px */
  --fs-base:      0.875rem;    /* 14px */
  --fs-md:        1rem;        /* 16px */
  --fs-lg:        1.125rem;    /* 18px */
  --fs-xl:        1.375rem;    /* 22px */
  --fs-2xl:       1.75rem;     /* 28px */
  --fs-3xl:       2.25rem;     /* 36px */
  --fs-4xl:       3rem;        /* 48px */
  --fs-5xl:       4rem;        /* 64px */
  --fs-hero:      clamp(3rem, 7vw, 5.5rem);

  --lh-tight:     1.15;
  --lh-snug:      1.35;
  --lh-normal:    1.6;
  --lh-loose:     1.85;

  --ls-wide:      0.12em;
  --ls-wider:     0.20em;
  --ls-widest:    0.30em;

  /* ─── Spacing ─── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --sp-40: 10rem;

  /* ─── Layout ─── */
  --container:     1200px;
  --container-sm:  840px;
  --container-xs:  640px;
  --gutter:        clamp(1.25rem, 4vw, 3rem);

  /* ─── Borders & Radius ─── */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  12px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.45);
  --shadow-gold: 0 0 30px rgba(181,134,42,0.15);

  /* ─── Transitions ─── */
  --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --t-fast:     150ms;
  --t-base:     250ms;
  --t-slow:     450ms;
  --t-xl:       700ms;

  /* ─── Z-index ─── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;
  --z-wa:      400;
}