/* tokens.css — every colour on the site, in one place, in both themes.

   Loaded FIRST on every page: the three public pages (whose stylesheets were
   tokenized from the operator's design by tools/theme_tokenize.py) and every
   other page through site/app.css, which maps the old panel's variable names
   onto these. One palette, so a card on the dashboard and a card on the
   landing page are the same card.

   LIGHT is the operator's design, value for value — each token's light value
   is the literal it replaced (the most common one where near-duplicates were
   merged, e.g. #e3e9ee / #e2e9ec / #e5eaee → --line) — with FIVE exceptions,
   each marked on its line below: text colours the contrast audit of 28
   Shahrivar 1405 measured under 4.5:1 against the surface they sit on. Each
   was darkened only as far as clearing 4.5:1 (+0.1) needs, same hue: 3–17%.
   The old site held every text pair to that bar; the unified one keeps it.
   The bright-orange half of the hero heading was the one exception the audit
   left open (--accent on --bg, 2.51:1 — large text needs 3:1). On 29 Shahrivar
   1405 the operator chose the button orange for it, so `h1 span` in style.css
   now points at --accent-dark: no new colour, and the heading matches the
   buttons. OPEN.md ب‑۶.

   DARK is new. It keeps the design's orange, its pastel icon bubbles and its
   mint, on a blue-grey night rather than pure black, and every ink was checked
   against its surface: --ink ≈ 15:1, --muted ≈ 7:1, --accent-dark ≈ 7:1 on
   --surface. Text that is orange on a light page needs to be LIGHTER orange on
   a dark one to stay readable, which is why --accent-dark goes up, not down.

   How the theme is chosen (site/base.html sets it before first paint):
     a saved choice (localStorage "takdns-theme")  >  the system setting  >  light
   The media-query block below repeats the dark values for a visitor with
   JavaScript off, whose system asks for dark: the explicit attribute always
   wins in both directions, the system setting only when nobody has chosen. */

:root {
  color-scheme: light;

  --bg:          #f7f9fb;
  --surface:     #ffffff;
  --surface-2:   #f3f7f8;
  --glass:       rgba(255, 255, 255, .86);
  --line:        #e5eaee;
  --line-2:      #d7e1e5;

  --ink:         #202d3a;
  --ink-2:       #425b6b;
  --muted:       #5e707e;   /* design #657888 — 4.12:1 on --mint-soft */
  --muted-2:     #66737c;   /* design #7b8b95 — 3.52:1 on white */
  --faint:       #93a3af;

  --accent:      #f47e43;
  --accent-dark: #b74e21;   /* design #bd5022 — 4.38:1 on --accent-soft */
  --accent-soft: #fff1e7;
  --accent-line: #efc0a6;
  --accent-ring: rgba(244, 126, 67, .20);
  --accent-glow: rgba(244, 126, 67, .125);
  --on-accent:   #ffffff;

  --mint:        #437867;   /* design #4d8a76 — 3.64:1 on --mint-soft */
  --mint-ink:    #345a56;
  --mint-soft:   #edf5f3;
  --mint-line:   #d8e8e3;

  --focus:       #257a8b;
  --highlight:   rgba(255, 255, 255, .56);
  --shadow:      rgba(50, 68, 83, .04);
  --shadow-2:    rgba(53, 93, 103, .08);

  --info-soft:   #eef5fb;  --info-line: #d9e7f3;  --info-ink: #34506a;
  --warn-soft:   #fff3e9;  --warn-line: #f4d5bd;  --warn-ink: #81542d;
  --ok-soft:     #e9f5ef;  --ok-line:   #cfe7da;  --ok-ink:   #2f6b52;
  --bad-soft:    #fbeceb;  --bad-line:  #f0cfcc;  --bad-ink:  #8a3a33;

  /* The six pastel icon bubbles of the category cards. */
  --p-orange-bg: #fff0e5;  --p-orange: #cf7a3b;
  --p-lilac-bg:  #eee9f9;  --p-lilac:  #725f9d;   /* design #8871bb — 3.44:1 */
  --p-mint-bg:   #e6f3ed;  --p-mint:   #549a82;
  --p-blue-bg:   #e9f1fc;  --p-blue:   #688bbc;
  --p-rose-bg:   #f9eaf0;  --p-rose:   #b77691;
  --p-butter-bg: #fcf3df;  --p-butter: #b28c46;
}

/* ---- dark: the attribute, set by the page ------------------------------ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0e1317;
  --surface:     #151c22;
  --surface-2:   #1a232a;
  --glass:       rgba(21, 28, 34, .86);
  --line:        #243039;
  --line-2:      #2e3b45;

  --ink:         #e7eef3;
  --ink-2:       #c9d6de;
  --muted:       #9fb0bc;
  --muted-2:     #8a9aa6;
  --faint:       #6f808c;

  --accent:      #f7894f;
  --accent-dark: #f5a172;
  --accent-soft: rgba(247, 137, 79, .13);
  --accent-line: rgba(247, 137, 79, .38);
  --accent-ring: rgba(247, 137, 79, .30);
  --accent-glow: rgba(247, 137, 79, .18);
  /* ⚠️ DARK, not white. Every accent surface is brighter in this theme, and
     white on #f7894f measured 2.05:1 — the buttons were the only text on the
     dark home page under 4.5:1. A near-black label on it is ~8:1. */
  --on-accent:   #1a0f07;

  --mint:        #74c0a5;
  --mint-ink:    #a6dcc7;
  --mint-soft:   rgba(116, 192, 165, .10);
  --mint-line:   rgba(116, 192, 165, .26);

  --focus:       #5cc6d8;
  --highlight:   rgba(255, 255, 255, .04);
  --shadow:      rgba(0, 0, 0, .25);
  --shadow-2:    rgba(0, 0, 0, .40);

  --info-soft:   rgba(104, 150, 200, .13);  --info-line: rgba(104, 150, 200, .30);  --info-ink: #a9c8e6;
  --warn-soft:   rgba(230, 160, 90, .12);   --warn-line: rgba(230, 160, 90, .32);   --warn-ink: #f0c08f;
  --ok-soft:     rgba(90, 190, 140, .12);   --ok-line:   rgba(90, 190, 140, .30);   --ok-ink:   #8fd6b1;
  --bad-soft:    rgba(232, 120, 110, .13);  --bad-line:  rgba(232, 120, 110, .32);  --bad-ink:  #f0a39b;

  --p-orange-bg: rgba(236, 160, 111, .15);  --p-orange: #f0a672;
  --p-lilac-bg:  rgba(150, 128, 200, .17);  --p-lilac:  #b7a4e3;
  --p-mint-bg:   rgba(84, 154, 130, .18);   --p-mint:   #7cc4a9;
  --p-blue-bg:   rgba(104, 139, 188, .18);  --p-blue:   #9bb9e3;
  --p-rose-bg:   rgba(183, 118, 145, .18);  --p-rose:   #e0a3bd;
  --p-butter-bg: rgba(178, 140, 70, .18);   --p-butter: #dcbc7e;
}

/* ---- dark: the system setting, for a visitor with JavaScript off --------
   Same values as above. ⚠️ Keep the two blocks identical: this one only
   applies when nobody has set the attribute at all. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0e1317; --surface: #151c22; --surface-2: #1a232a; --glass: rgba(21, 28, 34, .86);
    --line: #243039; --line-2: #2e3b45;
    --ink: #e7eef3; --ink-2: #c9d6de; --muted: #9fb0bc; --muted-2: #8a9aa6; --faint: #6f808c;
    --accent: #f7894f; --accent-dark: #f5a172; --accent-soft: rgba(247, 137, 79, .13);
    --accent-line: rgba(247, 137, 79, .38); --accent-ring: rgba(247, 137, 79, .30);
    --accent-glow: rgba(247, 137, 79, .18); --on-accent: #1a0f07;
    --mint: #74c0a5; --mint-ink: #a6dcc7; --mint-soft: rgba(116, 192, 165, .10); --mint-line: rgba(116, 192, 165, .26);
    --focus: #5cc6d8; --highlight: rgba(255, 255, 255, .04); --shadow: rgba(0, 0, 0, .25); --shadow-2: rgba(0, 0, 0, .40);
    --info-soft: rgba(104, 150, 200, .13); --info-line: rgba(104, 150, 200, .30); --info-ink: #a9c8e6;
    --warn-soft: rgba(230, 160, 90, .12); --warn-line: rgba(230, 160, 90, .32); --warn-ink: #f0c08f;
    --ok-soft: rgba(90, 190, 140, .12); --ok-line: rgba(90, 190, 140, .30); --ok-ink: #8fd6b1;
    --bad-soft: rgba(232, 120, 110, .13); --bad-line: rgba(232, 120, 110, .32); --bad-ink: #f0a39b;
    --p-orange-bg: rgba(236, 160, 111, .15); --p-orange: #f0a672;
    --p-lilac-bg: rgba(150, 128, 200, .17); --p-lilac: #b7a4e3;
    --p-mint-bg: rgba(84, 154, 130, .18); --p-mint: #7cc4a9;
    --p-blue-bg: rgba(104, 139, 188, .18); --p-blue: #9bb9e3;
    --p-rose-bg: rgba(183, 118, 145, .18); --p-rose: #e0a3bd;
    --p-butter-bg: rgba(178, 140, 70, .18); --p-butter: #dcbc7e;
  }
}