/* tokens.css — the single source of truth for this project's design.
 * Components read these variables; no component hardcodes a color, size, radius or duration.
 *
 * Approved plan (29 Oct 2026, "editorial research note"):
 *   Layout: left-aligned research note on limestone paper; one memorable element, the five
 *   varieties drawn as a transit line placed by real longitude (Rabat → Cairo → Beirut → Doha),
 *   with MSA as the standard station under the line.
 *   Color: ink on limestone, one terracotta accent; olive/sand/clay only for score cells.
 *   Type: Newsreader (display), IBM Plex Sans (body), Noto Naskh Arabic (Arabic), Plex Mono (numbers).
 */

:root {
  --color-bg:            #f2eee4;   /* limestone paper            */
  --color-surface:       #faf7f0;   /* raised panels, table head  */
  --color-border:        #dcd4c3;   /* hairlines                  */
  --color-text:          #1c1a17;   /* ink                        */
  --color-text-muted:    #655e52;   /* captions (4.9:1 on bg)     */
  --color-accent:        #a4472a;   /* terracotta: the line, links */
  --color-accent-contrast:#fffaf2;
  --color-score-high:    #5d7748;   /* olive  ≥ 4.5               */
  --color-score-mid:     #b8913f;   /* sand   3.5–4.5             */
  --color-score-low:     #b9603f;   /* clay   < 3.5               */
  --color-score-ink:     #fffaf2;   /* text on score cells        */
  --color-focus:         #a4472a;
  --color-accent-tint:   #f1e1d6;   /* Arabic-mode reply panel, warm state */
  --color-code-bg:       #1c1a17;   /* code blocks, same ink in both themes */
  --color-code-text:     #efe9dd;
  --color-code-muted:    #a99f8d;
  --color-code-accent:   #eb9d78;   /* the :arabic-* suffix inside code */
  --color-skeleton:      #e6dfd1;   /* loading bars                 */
  --color-skeleton-hi:   #f6f2ea;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Noto Naskh Arabic", "Geeza Pro", "Arial", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Modular scale (~1.25) */
  --text-xs:   0.79rem;
  --text-sm:   0.889rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;
  --text-5xl:  3.815rem;

  --leading-tight: 1.12;
  --leading-normal: 1.55;
  --leading-arabic: 1.9;
  --tracking-tight: -0.012em;
  --tracking-label: 0.08em;
  --measure: 64ch;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --page-max: 68rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md: 0 1px 2px rgba(28, 26, 23, 0.05), 0 8px 24px -12px rgba(28, 26, 23, 0.18);
  --hit-min: 44px;

  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 600ms;
  --duration-shimmer: 1400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* V3 hero: one colour per variety (threads, dots, markers). Each ≥4.5:1 on bg and surface. */
  --dialect-msa:   #6b6357;   /* formal: the muted standard  */
  --dialect-egy:   #9e561c;   /* Cairo: Nile clay            */
  --dialect-gulf:  #1f6b6e;   /* Doha: gulf water            */
  --dialect-lev:   #5b6e2c;   /* Beirut: olive               */
  --dialect-mag:   #9a3550;   /* Rabat: zellige rose         */
  --dialect-tunis: #2f5b93;   /* Tunis: Sidi Bou Said blue   */
  --thread-width: 1.5px;
  --thread-width-you: 2.5px;
  --duration-thread: 1100ms;
  --duration-swap: 420ms;
  --duration-cycle: 8500ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #17150f; --color-surface: #201d16; --color-border: #3a3429;
    --color-text: #ede6d8; --color-text-muted: #a99f8d; --color-accent: #e08a62;
    --color-accent-contrast: #17150f; --color-score-high: #6f8b58; --color-score-mid: #a98637;
    --color-score-low: #b5603f; --color-score-ink: #fffaf2; --color-focus: #e08a62;
    --color-accent-tint: #2c1f17; --color-code-bg: #0f0d09; --color-skeleton: #2a261e; --color-skeleton-hi: #353026;
    --shadow-md: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6);

    --dialect-msa: #b3a996; --dialect-egy: #e09a5c; --dialect-gulf: #62b8ba; --dialect-lev: #a9bd6e; --dialect-mag: #e48aa5; --dialect-tunis: #8eb0e3;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #17150f; --color-surface: #201d16; --color-border: #3a3429;
  --color-text: #ede6d8; --color-text-muted: #a99f8d; --color-accent: #e08a62;
  --color-accent-contrast: #17150f; --color-score-high: #6f8b58; --color-score-mid: #a98637;
  --color-score-low: #b5603f; --color-score-ink: #fffaf2; --color-focus: #e08a62;
  --color-accent-tint: #2c1f17; --color-code-bg: #0f0d09; --color-skeleton: #2a261e; --color-skeleton-hi: #353026;
  --shadow-md: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.6);
  --dialect-msa: #b3a996; --dialect-egy: #e09a5c; --dialect-gulf: #62b8ba; --dialect-lev: #a9bd6e; --dialect-mag: #e48aa5; --dialect-tunis: #8eb0e3;
  color-scheme: dark;
}