/* Fihris al-Maktabah — design tokens · "al-Hamish" identity
   Source: designer handoff 2026-09-14 (handoff.dc.html, "copy as is").

   Comments are Latin on purpose: CSS opens in monospace editors where
   Arabic comments reverse and fall back to a substitute font.

   Three theme states, and all three must resolve:
     1. no attribute        -> follows the OS (prefers-color-scheme)
     2. data-theme="light"  -> light even on a dark OS
     3. data-theme="dark"   -> dark even on a light OS
   The dark values appear twice (media query + attribute). They MUST stay
   identical — tests/test_tokens.py fails if they drift.

   Every text colour is >= 4.5:1 on field, surface and sunken in both
   themes. tests/test_tokens.py computes this from this file, so a change
   that breaks it fails CI instead of shipping.

   To switch identity: link static/tokens-cream.css instead of this file.
   Same variable names, different values. */

:root {
  /* surfaces */
  --field:      #F0ECDE;  /* page ground */
  --surface:    #FAF7EC;  /* cards, tables */
  --sunken:     #E3DECB;  /* table head, inputs */
  --rule:       #C9C3AB;  /* row divider, 1px */
  --rule-hard:  #9A9377;  /* field border, frame, 1px */

  /* text — ratios: on field · on surface · on sunken */
  --ink:        #161A10;  /* 14.93 · 16.46 · 13.10 */
  --ink-2:      #4A5138;  /*  7.03 ·  7.75 ·  6.17 */
  --ink-3:      #5C6347;  /*  5.33 ·  5.88 ·  4.68 */

  /* accent */
  --acc:        #B52D0C;  /*  5.31 ·  5.85 ·  4.66 */
  --acc-deep:   #8F2208;
  --acc-tint:   #F2DFD7;
  --on-acc:     #FAF7EC;

  /* states */
  --ok:         #2A5A22;
  --warn:       #6E4A05;
  --bad:        #A3230F;
  --info:       #1D5163;
  --ok-tint:    #DDE7D6;
  --warn-tint:  #EFE4C7;
  --bad-tint:   #F2DBD5;
  --info-tint:  #D9E5EA;

  /* vertical rail + header */
  --rail:       #14180E;
  --rail-ink:   #EFEDDF;
  --rail-acc:   #F07A4F;
  --rail-rule:  #39402A;

  /* type — four faces, all OFL, all self-hosted (static/fonts/fonts.css) */
  --f-display:  'Kufam', system-ui, sans-serif;        /* 20px+ · 1.35 */
  --f-ui:       'Readex Pro', system-ui, sans-serif;   /* 16-17px · 1.75 */
  --f-read:     'Noto Naskh Arabic', serif;            /* 17-18px · 1.9 */
  --f-id:       'Space Mono', ui-monospace, monospace; /* 14px · LATIN ONLY */

  /* type scale — nothing Arabic below --size-min */
  --size-page:    40px;
  --size-section: 28px;
  --size-sub:     22px;
  --size-card:    20px;
  --size-read:    18px;
  --size-ui:      17px;
  --size-min:     16px;
  --size-id:      14px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  --radius: 0;
  --rule-w: 2px;
  --touch:  44px;

  /* section colours — six grey tiers, two sections each.
     --sec-ink on every one is >= 4.5:1. Printed labels are mostly
     black-and-white: the name carries the difference, not the hue. */
  --sec-ink:     #F6F3E6;
  --sec-quran:   #1D3327;  --sec-aqidah:  #242E46;  /* tier 1 */
  --sec-qanun:   #2F3C45;  --sec-hadith:  #592F1E;  /* tier 2 */
  --sec-maliyah: #2B4D40;  --sec-lughah:  #5E3D4B;  /* tier 3 */
  --sec-fiqh:    #64503A;  --sec-usul:    #2E5A64;  /* tier 4 */
  --sec-tarajim: #57654A;  --sec-idarah:  #645D72;  /* tier 5 */
  --sec-tarikh:  #84684C;  --sec-amm:     #6D6D70;  /* tier 6 */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field:     #14180E;
    --surface:   #1C2114;
    --sunken:    #262C1B;
    --rule:      #39402A;
    --rule-hard: #545C3E;
    --ink:       #EFEDDF;
    --ink-2:     #BDBCA4;
    --ink-3:     #9C9B84;
    --acc:       #F07A4F;
    --acc-deep:  #F79470;
    --acc-tint:  #3A2419;
    --on-acc:    #14180E;
    --ok:        #8CC77A;  --ok-tint:   #1F2C19;
    --warn:      #DFB454;  --warn-tint: #332A14;
    --bad:       #F38B70;  --bad-tint:  #33201A;
    --info:      #84C0D6;  --info-tint: #18272D;
    --rail:      #0C0F07;
    --rail-rule: #2C3220;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --field:     #14180E;
  --surface:   #1C2114;
  --sunken:    #262C1B;
  --rule:      #39402A;
  --rule-hard: #545C3E;
  --ink:       #EFEDDF;
  --ink-2:     #BDBCA4;
  --ink-3:     #9C9B84;
  --acc:       #F07A4F;
  --acc-deep:  #F79470;
  --acc-tint:  #3A2419;
  --on-acc:    #14180E;
  --ok:        #8CC77A;  --ok-tint:   #1F2C19;
  --warn:      #DFB454;  --warn-tint: #332A14;
  --bad:       #F38B70;  --bad-tint:  #33201A;
  --info:      #84C0D6;  --info-tint: #18272D;
  --rail:      #0C0F07;
  --rail-rule: #2C3220;
  color-scheme: dark;
}