/* qartbabili studio — design tokens (DNA §4–8). Source of truth: dna/DNA.md.
   Copy verbatim to css/tokens.css. Custom properties only, no selectors styling elements.
   Day = "jour" (default). Night = "veillée": [data-theme="night"], or system dark when no explicit choice. */

:root {
  color-scheme: light;

  /* ── §4 Colour · day (jour) ─────────────────────────────── contrast vs --c-paper */
  --c-paper: #FBF8EE;          /* page ground · 60 %                                   */
  --c-paper-2: #F3EDDC;        /* sunk surfaces                                        */
  --c-paper-3: #E9E1CB;        /* non-text fills                                       */
  --c-ink: #2F3338;            /* text, arch, gate · 30 %             11.97:1          */
  --c-ink-2: #565B61;          /* secondary text                       6.45:1          */
  --c-ink-3: #6B6F75;          /* tertiary text, ONLY on --c-paper     4.76:1          */
  --c-sun: #D9A862;            /* sun disc, dial, graphics only        2.03:1 (no text) */
  --c-sun-text: #8C6420;       /* ochre text accents                   4.99:1          */
  --c-terra: #B8603F;          /* courses, numerals ≥ 24px, graphics   4.13:1          */
  --c-terra-text: #9A4A2B;     /* terracotta body-size text            5.83:1          */
  --c-line: #D6CDB5;           /* decorative hairlines (never sole affordance)         */
  --c-door: #2F3338;           /* doorway fill: dark by day, lit at night              */
  --c-door-text: #FBF8EE;      /* text inside a doorway                11.97:1         */
  --c-door-text-2: #C4BEB1;    /* secondary text inside a doorway       6.87:1         */
  --c-door-accent: #E3B470;    /* label inside a doorway                6.68:1         */
  --c-door-sun: #D9A862;       /* sun disc inside a doorway (graphic)   5.89:1         */
  --c-door-course: #B8603F;    /* courses crossing a doorway (graphic)  2.90:1         */
  --c-door-hover: #D9A862;     /* a closed door lights up under the pointer           */
  --c-focus: #9A4A2B;          /* focus ring                           5.83:1          */
  --c-selection: #EBD3A8;      /* ::selection ground (ink on it 8.73:1)                */
  --c-link-underline: #B8603F;

  /* constant (both themes): the couchant field (oaths), the veillée band, the brand plaque */
  --c-field: #9A4A2B;          /* terracotta field at dusk                             */
  --c-field-ink: #FBF8EE;      /* on --c-field                          5.83:1         */
  --c-field-ink-2: #F3EDDC;    /* on --c-field                          5.30:1         */
  --c-field-num: #E3B470;      /* numerals ≥ 24px, sun bullets, focus   3.25:1         */
  --c-field-line: #D9825F;     /* hairlines on the field (decorative)   2.16:1         */
  --c-veillee-bg: #2F3338;
  --c-veillee-course: #B8603F; /* courses at night (graphic)           2.90:1         */
  --c-veillee-ink: #F1EBDC;    /* on --c-veillee-bg                    10.69:1         */
  --c-veillee-ink-2: #C4BEB1;  /* on --c-veillee-bg                     6.87:1         */
  --c-veillee-door: #E3B470;   /* lit doorway on --c-veillee-bg         6.68:1         */
  --c-veillee-line: #565B61;   /* hairlines on the band (decorative)                   */
  --c-mark-plaque: #FBF8F0;    /* exact ground of qartbabili-mark.webp                 */

  /* ── §5 Typography ──────────────────────────────────────── */
  /* un timbre par section (dna/FONTS.md) : marque géométrique · titres gravés · texte net · étiquettes à chasse fixe */
  --f-display: "Outfit", "Reem Kufi", "Helvetica Neue", Arial, sans-serif;                /* nom, chiffres des portes   */
  --f-title: "Frank Ruhl Libre", "Reem Kufi", Georgia, "Times New Roman", serif;           /* titres de mouvement        */
  --f-lede: "Frank Ruhl Libre", "IBM Plex Sans Arabic", Georgia, serif;                    /* chapeaux                   */
  --f-text: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-origine: "Frank Ruhl Libre", "Reem Kufi", Georgia, serif;                            /* origine : inscriptionnel   */
  --f-ouvrage: "Outfit", "Reem Kufi", "Helvetica Neue", Arial, sans-serif;                 /* ouvrage : précis, tracé    */
  --f-avenir: "Frank Ruhl Libre", "Reem Kufi", Georgia, serif;                             /* serments : voix posée      */
  --f-label: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-script: "QB Script", "Noto Sans Phoenician", "Noto Sans Cuneiform", "Segoe UI Historic", "Segoe UI Symbol", serif;
  --f-ar-display: "Reem Kufi", "IBM Plex Sans Arabic", "Noto Kufi Arabic", system-ui, sans-serif;
  --f-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;

  --t-xs: 0.8125rem;                                     /* 13px: marginalia, sources   */
  --t-sm: 0.9375rem;                                     /* 15px: labels, footer        */
  --t-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17→19px body                */
  --t-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);      /* 20→24px                     */
  --t-xl: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);        /* 26→36px oath vow, h3, lede  */
  --t-2xl: clamp(2.125rem, 1.7rem + 1.9vw, 3.375rem);    /* 34→54px hero line, contact  */
  --t-3xl: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);       /* 44→88px h2, morphemes       */
  --hero-name-ratio: 0.141;                              /* name ≈ 0.62 × gate (Outfit): clears the courses with air on both sides */
  --t-4xl: calc(var(--hero-arch-w) * var(--hero-name-ratio)); /* the name stands in the gate */
  --hero-lh: 1.02;                                       /* hero name line box                       */
  --hero-name-baseline: 0.88;                            /* baseline from line-box top, em: (lh − (A+D))/2 + A, Outfit A 1.00 D 0.26 */

  --w-text: 400;
  --w-text-strong: 600;
  --w-label: 400;           /* Plex Mono 400 (étiquettes en capitales) */
  --w-display-light: 400;   /* morphemes, h2         */
  --w-display: 400;         /* hero line, lede       */
  --w-display-hero: 440;    /* hero name (Outfit)    */
  --w-display-strong: 600;  /* oath vows, h3         */
  --w-numeral: 500;         /* doorway numerals     */

  --lh-text: 1.6;
  --lh-tight: 1.25;
  --lh-display: 1.02;
  --track-display: -0.02em;
  --track-title: -0.012em;
  --track-label: 0.1em;     /* uppercase Latin labels only */
  --track-text: 0;

  --measure: 62ch;
  --measure-narrow: 44ch;

  /* coupure de seuil (signature gesture): inline doorway glyph */
  --split-door-w: 0.34em;
  --split-door-h: 0.71em;
  --split-gap: 0.05em;

  /* ── §6 Motif geometry ──────────────────────────────────── */
  --stroke-mark: 5;          /* arch/gate stroke in arch-space units (r = 42) */
  --stroke-display: 4;       /* hero arch stroke                              */
  --stroke-hair: 1px;
  --stroke-ground: 2px;      /* ground lines: doors, bands                    */
  --r-door: 999rem;          /* top radii → exact semicircle on any doorway box */
  --door-w: 3.25rem;         /* band doorway (section mark), ratio 16:34      */
  --door-h: 6.906rem;
  --course-bar: 0.5rem;      /* band courses: 8px bar                         */
  --course-gap: 0.625rem;    /*               10px gap                         */
  --bullet-sun: 0.5em;
  --bullet-door-w: 0.45em;
  --bullet-door-h: 0.95em;
  /* hero gate: one width drives arch, courses and name. Mobile: the column; ≥64rem: see below */
  --hero-arch-w: min(100vw - 2 * var(--margin), 30rem, (100svh - var(--head-h)) * 0.6);
  --dial-w: 2.5rem;
  --jamb-dial-w: 9rem;

  /* ── §7 Layout ──────────────────────────────────────────── */
  --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;
  --s-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  --grid-cols: 12;
  --grid-max: 76rem;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --margin: clamp(1.25rem, 0.5rem + 4vw, 4rem);
  --head-h: 4rem;
  --hit: 2.75rem;            /* minimum hit target (44px)                     */
  --z-head: 10;
  --z-skip: 20;

  /* ── §8 Motion ──────────────────────────────────────────── */
  --ease-lever: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-course: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-assise: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-ouverture: cubic-bezier(0.3, 0.7, 0.1, 1);
  --ease-veille: cubic-bezier(0.4, 0, 0.2, 1);
  --d-lever: 1600ms;
  --d-lever-delay: 200ms;
  --d-course: 900ms;
  --d-assise: 700ms;
  --d-assise-stagger: 120ms;
  --d-ouverture: 560ms;
  --d-veille: 420ms;
  --d-hover: 180ms;

  /* hour of reading → sun angle on the dial (rotation about arch centre) */
  --sun-dir: 1;
  --hour-angle: -72deg;
  --hour-sun: var(--c-sun);
}

@media (min-width: 64rem) {
  :root {
    /* the gate takes the start half; height-capped so name and line stay above a 768px fold */
    --hero-arch-w: clamp(22rem, min(42vw, (100svh - var(--head-h) - 12rem) * 1.25), 40rem);
  }
}

:root[dir="rtl"] { --sun-dir: -1; }

:root[data-hour="aube"]     { --hour-angle: -72deg; --hour-sun: var(--c-sun); }
:root[data-hour="matin"]    { --hour-angle: -36deg; --hour-sun: var(--c-sun); }
:root[data-hour="midi"]     { --hour-angle: 0deg;   --hour-sun: var(--c-sun); }
:root[data-hour="couchant"] { --hour-angle: 40deg;  --hour-sun: var(--c-terra); }
:root[data-hour="veillee"]  { --hour-angle: 72deg;  --hour-sun: var(--c-terra); }

/* Arabic: never tracked, taller lines. Reem Kufi (stepped, echoes the gate) for display, Plex Sans Arabic for reading */
:root:lang(ar) {
  --f-display: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-title: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-lede: "IBM Plex Sans Arabic", "Reem Kufi", system-ui, sans-serif;
  --f-text: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --f-origine: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-ouvrage: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-avenir: "Reem Kufi", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --f-label: "IBM Plex Sans Arabic", "IBM Plex Mono", system-ui, sans-serif;
  --lh-text: 1.85;
  --lh-tight: 1.5;
  --lh-display: 1.3;
  --track-display: 0;
  --track-title: 0;
  --track-label: 0;
  --w-label: 600;
  --w-display-light: 500;
  --w-display: 500;
  --w-display-hero: 600;
  --w-display-strong: 600;
  --w-numeral: 600;
  --measure: 58ch;
  --t-base: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --t-lg: clamp(1.3125rem, 1.2rem + 0.45vw, 1.5625rem);
  /* hero : Reem Kufi, A 1.10 D 0.40 → ligne 1.25 : ligne de base = (1.25 − 1.5)/2 + 1.1 = 0.975 em ;
     la ligne Kufi est plus large que le latin : ratio réduit pour garder de l'air de part et d'autre (queue du yā' incluse) */
  --hero-lh: 1.25;
  --hero-name-ratio: 0.15;
  --hero-name-baseline: 0.975;
}

/* ── Night · veillée (explicit choice) ───────────────────── contrast vs night --c-paper */
:root[data-theme="night"] {
  color-scheme: dark;
  --c-paper: #1C1E21;
  --c-paper-2: #25282C;
  --c-paper-3: #2F3338;
  --c-ink: #F1EBDC;            /* 14.05:1 */
  --c-ink-2: #C4BEB1;          /*  9.03:1 */
  --c-ink-3: #959189;          /*  5.32:1 (4.72:1 on paper-2) */
  --c-sun: #E3B470;            /*  8.77:1 */
  --c-sun-text: #E3B470;
  --c-terra: #D9825F;          /*  5.81:1 */
  --c-terra-text: #E0906F;     /*  6.67:1 */
  --c-line: #3A3E44;
  --c-door: #E3B470;           /* the doorway is lit */
  --c-door-text: #1C1E21;      /*  8.77:1 on the lit door */
  --c-door-text-2: #3A3E44;    /*  5.65:1 on the lit door */
  --c-door-accent: #1C1E21;    /*  8.77:1 */
  --c-door-sun: #9A4A2B;       /*  3.25:1 */
  --c-door-course: #9A4A2B;
  --c-door-hover: #D9825F;
  --c-focus: #E3B470;
  --c-selection: #5A4A2E;      /* ink on it 7.20:1 */
  --c-link-underline: #D9825F;
}

/* ── Night · veillée (system preference, unless the visitor chose day) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    color-scheme: dark;
    --c-paper: #1C1E21;
    --c-paper-2: #25282C;
    --c-paper-3: #2F3338;
    --c-ink: #F1EBDC;
    --c-ink-2: #C4BEB1;
    --c-ink-3: #959189;
    --c-sun: #E3B470;
    --c-sun-text: #E3B470;
    --c-terra: #D9825F;
    --c-terra-text: #E0906F;
    --c-line: #3A3E44;
    --c-door: #E3B470;
    --c-door-text: #1C1E21;
    --c-door-text-2: #3A3E44;
    --c-door-accent: #1C1E21;
    --c-door-sun: #9A4A2B;
    --c-door-course: #9A4A2B;
    --c-door-hover: #D9825F;
    --c-focus: #E3B470;
    --c-selection: #5A4A2E;
    --c-link-underline: #D9825F;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-lever: 0ms;
    --d-lever-delay: 0ms;
    --d-course: 0ms;
    --d-assise: 0ms;
    --d-assise-stagger: 0ms;
    --d-ouverture: 0ms;
    --d-veille: 0ms;
    --d-hover: 0ms;
  }
}