/* ═══════════════════════════════════════════════════════════════
   LUMORA AMOR — Design Tokens
   The single source of truth for color, type, spacing, and motion.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Color: Foundation ──────────────────────────────────── */
  --color-void:         #0A0A0A;
  --color-charcoal:     #121414;
  --color-charcoal-warm:#161817;
  --color-ink:          #1A1C1C;
  --color-ash:          #232626;
  --color-slate:        #2F3333;
  --color-stone:        #4A4F4F;
  --color-drift:        #6B7070;
  --color-mist:         #9CA3A3;
  --color-cloud:        #C8CCCC;
  --color-pearl:        #E8EAEA;
  --color-cream:        #F2E9DC;
  --color-soft-white:   #F5F5F5;
  --color-pure-white:   #FFFFFF;

  /* ─── Color: Brand ───────────────────────────────────────── */
  --color-amber:        #E9C176;
  --color-amber-dim:    #B8944E;
  --color-amber-glow:   #F5D99A;
  --color-amber-deep:   #8B6914;
  --color-violet:       #2D1B69;
  --color-violet-soft:  #4A3199;
  --color-violet-mist:  #6B52B5;
  --color-indigo:       #1E1145;
  --color-indigo-deep:  #120B2E;

  /* ─── Color: Semantic ────────────────────────────────────── */
  --bg-body:            var(--color-charcoal);
  --bg-deep:            var(--color-void);
  --bg-elevated:        var(--color-ink);
  --bg-surface:         var(--color-ash);
  --bg-warm:            var(--color-cream);
  --bg-warm-deep:       #E8DDCF;

  --text-primary:       var(--color-soft-white);
  --text-secondary:     var(--color-cloud);
  --text-muted:         var(--color-mist);
  --text-faint:         var(--color-drift);
  --text-accent:        var(--color-amber);
  --text-on-warm:       var(--color-charcoal);
  --text-on-warm-muted: var(--color-stone);

  --border-subtle:      rgba(245, 245, 245, 0.06);
  --border-light:       rgba(245, 245, 245, 0.10);
  --border-medium:      rgba(245, 245, 245, 0.15);
  --border-warm:        rgba(18, 20, 20, 0.08);

  --focus-ring:         var(--color-amber);
  --focus-ring-offset:  var(--color-charcoal);

  /* ─── Typography ─────────────────────────────────────────── */
  --font-display:       'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label:         'Syne', var(--font-body);

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:            clamp(0.6875rem, 0.65rem + 0.1875vw, 0.8125rem);    /* 11–13 */
  --text-sm:            clamp(0.8125rem, 0.775rem + 0.1875vw, 0.9375rem);   /* 13–15 */
  --text-base:          clamp(0.9375rem, 0.9rem + 0.1875vw, 1.0625rem);     /* 15–17 */
  --text-md:            clamp(1.0625rem, 1rem + 0.3125vw, 1.25rem);         /* 17–20 */
  --text-lg:            clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);          /* 20–26 */
  --text-xl:            clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);             /* 24–36 */
  --text-2xl:           clamp(1.875rem, 1.4rem + 2.375vw, 3.25rem);         /* 30–52 */
  --text-3xl:           clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);            /* 36–72 */
  --text-4xl:           clamp(2.75rem, 1.5rem + 6.25vw, 6.5rem);            /* 44–104 */
  --text-hero:          clamp(3rem, 1.5rem + 7.5vw, 7.5rem);                /* 48–120 */

  --leading-tight:      1.1;
  --leading-snug:       1.25;
  --leading-normal:     1.55;
  --leading-relaxed:    1.75;
  --leading-loose:      1.9;

  --tracking-tight:     -0.03em;
  --tracking-snug:      -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.12em;
  --tracking-widest:    0.18em;

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

  /* Fluid vertical rhythm for sections */
  --section-gap:        clamp(4rem, 3rem + 5vw, 8rem);
  --section-gap-lg:     clamp(5rem, 3.5rem + 7.5vw, 10rem);

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max:      1280px;
  --container-narrow:   800px;
  --container-wide:     1440px;
  --container-pad:      clamp(1.25rem, 1rem + 1.25vw, 3rem);

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:     cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-soft:      cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-soft:   cubic-bezier(0.65, 0, 0.35, 1);

  --duration-instant:   100ms;
  --duration-fast:      200ms;
  --duration-normal:    400ms;
  --duration-slow:      700ms;
  --duration-glacial:   1200ms;

  /* ─── Borders & Radii ────────────────────────────────────── */
  --radius-sm:          0.375rem;  /*  6 */
  --radius-md:          0.75rem;   /* 12 */
  --radius-lg:          1rem;      /* 16 */
  --radius-xl:          1.5rem;    /* 24 */
  --radius-full:        9999px;

  /* ─── Shadows ────────────────────────────────────────────── */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md:          0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg:          0 8px 40px rgba(0, 0, 0, 0.35);
  --shadow-glow-amber:  0 0 40px rgba(233, 193, 118, 0.15);
  --shadow-glow-violet: 0 0 40px rgba(45, 27, 105, 0.2);

  /* ─── Z-Index Scale ──────────────────────────────────────── */
  --z-base:             1;
  --z-above:            10;
  --z-header:           100;
  --z-veil:             200;
  --z-splash:           1000;
}