/* ==========================================================================
   AskAsif Design Tokens — "Ink & Saffron"
   Single source of truth. Maps 1:1 to WordPress theme.json later.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("../fonts/noto-nastaliq-urdu-arabic-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("../fonts/noto-nastaliq-urdu-arabic-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  /* --- Palette: raw --- */
  --ink-950: #0b0d12;
  --ink-900: #11141b;
  --ink-800: #1a1e28;
  --ink-700: #262b38;
  --ink-500: #5a6172;
  --ink-300: #a3a8b4;
  --paper-50: #fbf8f2;
  --paper-100: #f4efe5;
  --paper-200: #e9e1d2;
  --paper-300: #d9cfbc;
  --saffron-300: #f3c77a;
  --saffron-500: #e29a2e;
  --saffron-700: #8c540a;
  --jade-400: #4fb3a3;
  --jade-600: #23766b;
  --clay-500: #c75f43;

  /* --- Semantic (light) --- */
  --bg: var(--paper-100);
  --bg-raised: var(--paper-50);
  --bg-sunken: var(--paper-200);
  --surface-ink: var(--ink-900);
  --text: var(--ink-900);
  --text-muted: #555b68;
  --text-on-ink: var(--paper-100);
  --text-on-ink-muted: var(--ink-300);
  --line: color-mix(in oklab, var(--ink-900) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--ink-900) 32%, transparent);
  --accent: var(--saffron-500);
  --accent-ink: var(--saffron-700);   /* accessible text on paper */
  --accent-2: var(--jade-600);
  --accent-3: var(--clay-500);
  --sample: #9a3f27;            /* "Sample" label text, AA on paper */
  --focus: #1f6feb;

  /* --- Typography --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;

  /* Fluid type scale (min @360px → max @1440px) */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-3xl: clamp(2.6rem, 1.8rem + 3.6vw, 5.5rem);
  --fs-hero: clamp(2.9rem, 1.7rem + 5vw, 6.6rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  /* --- Space (4px base) --- */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2.5rem);

  /* --- Layout --- */
  --w-content: 42rem;   /* article measure */
  --w-wide: 76rem;
  --w-full: 92rem;

  /* --- Shape & depth --- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgb(11 13 18 / .06), 0 2px 8px rgb(11 13 18 / .05);
  --shadow-2: 0 2px 4px rgb(11 13 18 / .05), 0 18px 40px -12px rgb(11 13 18 / .22);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 700ms;

  color-scheme: light;
}

/* --- Dark theme (manual toggle + OS preference) --- */
:root[data-theme="dark"] {
  --bg: var(--ink-950);
  --bg-raised: var(--ink-900);
  --bg-sunken: #07080c;
  --surface-ink: #07080c;
  --text: var(--paper-100);
  --text-muted: var(--ink-300);
  --line: color-mix(in oklab, var(--paper-100) 12%, transparent);
  --line-strong: color-mix(in oklab, var(--paper-100) 28%, transparent);
  --accent-ink: var(--saffron-300);
  --accent-2: var(--jade-400);
  --focus: #6ea8ff;
  --sample: #f0907a;
  --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950); --bg-raised: var(--ink-900); --bg-sunken: #07080c; --surface-ink: #07080c;
    --text: var(--paper-100); --text-muted: var(--ink-300);
    --line: color-mix(in oklab, var(--paper-100) 12%, transparent);
    --line-strong: color-mix(in oklab, var(--paper-100) 28%, transparent);
    --accent-ink: var(--saffron-300); --accent-2: var(--jade-400); --focus: #6ea8ff; --sample: #f0907a;
    color-scheme: dark;
  }
}

/* --- Urdu / RTL typography overrides --- */
:root[lang="ur"] {
  /* Latin runs inside Urdu pages fall back to the Latin brand fonts, not a generic serif */
  --font-display: "Noto Nastaliq Urdu", "Fraunces", Georgia, serif;
  --font-sans: "Noto Nastaliq Urdu", "Geist", system-ui, sans-serif;
  --lh-tight: 1.75;
  --lh-snug: 1.9;
  --lh-body: 2.25;
  --fs-hero: clamp(2.2rem, 1.3rem + 4.2vw, 5.4rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.9rem);
}