/* ==========================================================================
   KHANEYE NOOR — Design System : Layer 1 · Design Tokens
   The single source of truth. Nothing below this file hard-codes a value.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. COLOR — Primitives
     Brand DNA: deep architectural night (ink) + the light itself (gold).
     --------------------------------------------------------------------- */

  /* Ink — the darkness that makes light readable */
  --ink-950: #02080f;
  --ink-900: #04101f;
  --ink-850: #061529;
  --ink-800: #071a36;   /* legacy brand navy */
  --ink-700: #0c2447;
  --ink-600: #143156;
  --ink-500: #1f4570;
  --ink-400: #35608f;

  /* Gold — the emitted light */
  --gold-200: #fff6d4;
  --gold-300: #ffe89a;
  --gold-400: #ffd75c;
  --gold-500: #f2c300;   /* legacy brand gold */
  --gold-600: #d0a400;
  --gold-700: #a07d00;

  /* Paper — warm neutrals for light surfaces */
  --paper-50:  #fbfaf7;
  --paper-100: #f6f4ef;  /* legacy brand paper */
  --paper-200: #ece8dd;
  --paper-300: #d9d3c4;

  /* Neutral text on dark */
  --mist-100: #f4f7fb;
  --mist-200: #d7dde7;
  --mist-300: #aab5c4;
  --mist-400: #7d8899;
  --mist-500: #5a6577;

  /* ---------------------------------------------------------------------
     2. COLOR — Semantic aliases (use these, not the primitives)
     --------------------------------------------------------------------- */
  --bg:              var(--ink-900);
  --bg-elevated:     var(--ink-850);
  --bg-sunken:       var(--ink-950);
  --surface:         rgba(255, 255, 255, .035);
  --surface-hover:   rgba(255, 255, 255, .06);
  --surface-strong:  rgba(255, 255, 255, .09);

  --text:            var(--mist-100);
  --text-muted:      var(--mist-300);
  --text-subtle:     var(--mist-400);
  --text-inverse:    var(--ink-900);

  --accent:          var(--gold-500);
  --accent-soft:     var(--gold-300);
  --accent-deep:     var(--gold-700);
  --on-accent:       var(--ink-900);

  --line:            rgba(255, 255, 255, .10);
  --line-strong:     rgba(255, 255, 255, .20);
  --line-accent:     rgba(242, 195, 0, .40);

  --focus-ring:      var(--gold-400);

  /* Signature light gradients — the "glow" language of the brand */
  --glow-warm:  radial-gradient(60% 60% at 50% 40%, rgba(255, 215, 92, .32), rgba(255, 215, 92, 0) 70%);
  --glow-cool:  radial-gradient(60% 60% at 50% 50%, rgba(53, 96, 143, .35), rgba(53, 96, 143, 0) 70%);
  --sheen:      linear-gradient(115deg, transparent 20%, rgba(255, 246, 212, .22) 48%, transparent 70%);
  --grad-accent: linear-gradient(100deg, var(--gold-600), var(--gold-400) 45%, var(--gold-200) 100%);
  --grad-veil:   linear-gradient(to top, rgba(4, 16, 31, .96) 0%, rgba(4, 16, 31, .72) 32%, rgba(4, 16, 31, .05) 78%);

  /* ---------------------------------------------------------------------
     3. TYPOGRAPHY
     Three families, one voice:
       display → editorial serif (Latin) / high-contrast Persian
       body    → Vazirmatn, tuned for fa + ar, excellent Latin fallback
       mono    → technical eyebrows, labels, numerals
     --------------------------------------------------------------------- */
  --font-body:    "Vazirmatn", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
  --font-display: "Cormorant Garamond", "Vazirmatn", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, "Courier New", monospace;

  /* Fluid type scale — 1.250 minor-third at mobile, 1.333 at desktop */
  --text-2xs:  clamp(0.625rem, 0.60rem + 0.12vw, 0.6875rem);
  --text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.90rem + 0.22vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1.00rem + 0.32vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.14rem + 0.55vw, 1.625rem);
  --text-2xl:  clamp(1.5rem,   1.30rem + 1.00vw, 2.25rem);
  --text-3xl:  clamp(1.875rem, 1.50rem + 1.85vw, 3.25rem);
  --text-4xl:  clamp(2.25rem,  1.60rem + 3.20vw, 4.5rem);
  --text-5xl:  clamp(2.75rem,  1.60rem + 5.60vw, 6.5rem);

  --leading-tight:  1.08;
  --leading-snug:   1.28;
  --leading-normal: 1.65;
  --leading-loose:  2.05;   /* Persian/Arabic body copy breathes wider */

  --tracking-mega:  .42em;
  --tracking-wide:  .22em;
  --tracking-label: .16em;
  --tracking-tight: -0.015em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------------
     4. SPACE — 4px base, fluid at the large end
     --------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --gutter:    clamp(1.25rem, 5vw, 5.5rem);
  --container:      1440px;
  --container-text: 68ch;

  /* ---------------------------------------------------------------------
     5. SHAPE & ELEVATION
     --------------------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md:   0 10px 30px -12px rgba(0, 0, 0, .60);
  --shadow-lg:   0 28px 70px -24px rgba(0, 0, 0, .75);
  --shadow-glow: 0 0 0 1px rgba(242, 195, 0, .22), 0 18px 60px -18px rgba(242, 195, 0, .40);

  /* ---------------------------------------------------------------------
     6. MOTION — one vocabulary of easings, reused everywhere
     --------------------------------------------------------------------- */
  --dur-instant: 90ms;
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    620ms;
  --dur-slower:  980ms;
  --dur-cinema:  1600ms;

  --ease-out:   cubic-bezier(.22, 1, .36, 1);        /* decelerate — UI default */
  --ease-inout: cubic-bezier(.65, .05, .36, 1);      /* balanced */
  --ease-soft:  cubic-bezier(.33, 1, .68, 1);        /* gentle reveals */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);    /* playful overshoot */
  --ease-light: cubic-bezier(.16, 1, .3, 1);         /* signature: light sweeping in */

  /* ---------------------------------------------------------------------
     7. LAYERS
     --------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-loader: 600;
}

/* --- Per-script typographic tuning -------------------------------------- */
html[lang="fa"], html[lang="ar"] {
  --leading-tight: 1.42;
  --leading-normal: 1.85;
  --leading-loose: 2.15;
  --tracking-tight: 0;
  /* Persian and Arabic are joined scripts: letter-spacing pulls the letters
     apart, so localized labels and buttons are set solid. */
  --tracking-label: 0;
}
html[lang="en"] {
  --leading-normal: 1.6;
  --leading-loose: 1.8;
}