/* 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;
  }
}

/* ---- shape and type: the half of the design that was never in one place ---
   4 Mehr 1405. The palette has lived here since 28 Shahrivar, and the panel and
   the public pages have looked like one product in COLOUR ever since. They did
   not look like one product in SHAPE, and measuring the customer's dashboard
   said why:

     12 different font sizes on one page, and 8 different corner radii
     the most common radius there was 4.8px — a hand-typed `.3rem`
     that exists in neither vocabulary

   chrome.css was writing 10/12/14px by hand; app.css had its own private scale
   (--r-sm/--r/--r-lg) that nothing else could see; tokens.css had no shape at
   all. Three vocabularies, so of course a card on the dashboard and a card on
   the landing page were different cards.

   These are theme-independent on purpose — a corner does not change at night —
   so they sit outside both palette blocks, and nothing below may redefine them.

   ⚠️ Adding a size here is not free. The whole point is that the list is
   SHORT: a page that needs a thirteenth font size almost always needs a
   different layout instead. */
:root {
  /* Corners. Four, and the pill. */
  --r-xs:   8px;     /* chips, badges, the small inputs inside a row */
  --r-sm:   10px;    /* nav pills, menu rows, small boxes */
  --r-btn:  12px;    /* buttons — the value chrome.css has always written */
  --r-md:   14px;    /* cards, popovers, form fields */
  --r-lg:   20px;    /* the big surfaces: hero panels, empty states */
  --r-pill: 999px;
  /* ⚠️ The one corner that is NOT on the ladder, and deliberately so: a
     usage-chart bar is a few pixels wide, and 8px would round it into a
     lozenge. It is named here so that a census of the page can still say
     every corner came from this file. */
  --r-bar:  4.8px;

  /* Type. Six steps, named for what they are, not how big they are. */
  --t-micro: .8125rem;   /* 13px — timestamps, helper lines under a field */
  --t-small: .875rem;    /* 14px — secondary text, table cells */
  --t-body:  .9375rem;   /* 15px — the size the site's header and body use */
  --t-lead:  1.0625rem;  /* 17px — the first line of a card, lead paragraphs */
  --t-h3:    1.1875rem;  /* 19px — a card's heading */
  --t-h2:    1.5rem;     /* 24px — a section's heading */
  --t-h1:    1.75rem;    /* 28px — the page's one heading */

  /* Rhythm. Everything vertical is a multiple of these, so cards in different
     templates line up without anyone measuring. */
  --gap-xs: .5rem;  --gap-sm: .75rem;  --gap: 1rem;
  --gap-lg: 1.5rem; --gap-xl: 2rem;
}