/* ASP Consulting — the SEMANTIC layer (design_handoff_track_polish §2).
 *
 * WHY THIS FILE EXISTS. colors.css is the brand palette: fixed values with
 * brand names, the same on paper as on screen. It cannot carry a theme, and it
 * must not try to — two of its names do double duty. --brand-navy is both the ink
 * everything is written in AND the surface Ask Track is drawn on; --brand-white
 * is both a card's ground AND the text on that navy. Flip either and the other
 * one breaks.
 *
 * So the palette stays fixed and this layer sits on top of it. A rule that
 * means "the page ground" says --ground; a rule that means "ASP blue" still
 * says --brand-blue. Only the names below change with the theme, which is why the
 * dark block can be this short: it is not a second stylesheet, it is thirty
 * values.
 *
 * WHAT DOES NOT CHANGE WITH THEME: --brand-orange (attention), the rose (identity),
 * the navy Ask Track surface with its --brand-on-ink-* ramp, and the sign-in
 * split. Nothing is redrawn to flatter the dark — same layout, same rules.
 *
 * NAME NOTE: the handoff called the table-head rule --rule-strong. The repo
 * already has a --rule-strong (#D8D8D4, the Tasks board column border), so this
 * one is --rule-head. They are different rules doing different jobs.
 */
:root, [data-theme="light"] {
  --ground: #FFFFFF;
  --rail-bg: #F5F5F5;
  --rail-border: #DEDEDA;
  --surface: #FFFFFF;

  --hair: #DEDEDA;
  --hair-strong: #C7C8C3;
  --rule-head: #0C1139;

  --ink: #0C1139;
  --ink-2: #55564F;
  --ink-3: #8A8B85;

  --anchor: #10328B;
  --link: #0A40C0;

  --nav-hover: #EDF1FB;
  --nav-active-bg: #FFFFFF;
  --nav-active-ink: #0A40C0;

  --brief-bg: #F5F5F5;
  --row-hover: #F5F5F5;
  --avatar-bg: #EDF1FB;

  --chip-border: #C7C8C3;
  --chip-active-bg: #0A40C0;
  --chip-active-ink: #F5F5F5;

  --halo: #DCE4F8;
  --hollow-bg: #FFFFFF;
  --cal-muted: #FAFAF8;
  --today-bg: #0A40C0;

  --status-ok-ui: #1F7A4D;
  --status-error: #C0290A;
  --status-hold-ink: #937717;
  --status-hold-bg: #FBF3E0;
  --status-overdue-ink: #B03600;
  --status-overdue-bg: #FEF3EE;
  --status-overdue-line: #F7DCCE;
  /* The WhatsApp channel marker (17/10/2026): the small icon beside RECEIVED /
     SENT on a WhatsApp row and in Mail. The icon only, never a fill or a row
     tint: the channel is an icon and a word. Darker than WhatsApp's own brand
     green so it holds 3:1 on white. */
  --wa-green: #128C4A;

  /* ── Extensions beyond the handoff's list ───────────────────────────────
     The handoff names thirty tokens; the repo styles against a wider palette
     than it had in view — four faint warm tints and three blue ones, all of
     which have to darken or they stay bright holes in a dark screen. Named
     here rather than left on --brand-* so the lint can tell a themed surface
     from a brand colour. */
  --surface-sunk: #ECECEA;        /* was --brand-grey-100: inset strips, sunk rows */
  --surface-sunk-soft: #FBFBFA;   /* was --brand-grey-25: hint bars, running rows */
  --surface-tint: #F7F8FA;        /* was --brand-grey-50: faint surface tint */
  --hair-soft: #EAEAE7;           /* was --brand-grey-150: the row hairline */
  --tint-blue: #F2F6FE;           /* was --brand-blue-25 */
  --tint-blue-2: #E6ECFB;         /* was --brand-blue-75 */
  --line-blue: #C9D6F5;           /* was --brand-blue-200 */
  --rule-board: #D8D8D4;          /* the Tasks board column border */
  /* The INVERTED fill: a chip, dot, bar or node drawn in the ink colour with
     the page colour on top. Navy-on-white in the light theme; in the dark one
     it has to flip, or a navy pill on a navy ground is a hole. */
  --ink-fill: #0C1139;
  --ink-fill-ink: #FFFFFF;
  /* A sheet that rises over the page needs to be a different surface from it.
     In light the page is white and a navy sheet is obviously separate; in dark
     the page IS navy, so the sheet lifts (§13). */
  --sheet-lift: #FFFFFF;
}

/* ── DARK (Karan 06/10/2026: "Grey is the dark mode for Track web") ─────────
   OS-style neutral grey, like macOS and Windows dark — no longer a navy page.
   Text is neutral grey only (no blue tint); blue is for numbers, links,
   selected states and today, never for large fields. Cards carry no shadow in
   dark: the surface colour and hairlines separate them.

   Black and Navy stay as alternatives behind darkGround (theme.js), stamped as
   data-dark-ground on <html>. Grey is the default and is written as the plain
   [data-theme="dark"] block so nothing else has to opt in. The phone app is
   NOT on these tokens (tokens/mobile.css) and stays navy until it is designed. */
[data-theme="dark"] {
  --ground: #1C1C1E;
  --rail-bg: #161618;
  --rail-border: rgba(255, 255, 255, 0.08);
  --surface: #2C2C2E;

  --hair: rgba(255, 255, 255, 0.10);
  --hair-strong: rgba(255, 255, 255, 0.28);
  --rule-head: rgba(255, 255, 255, 0.60);

  --ink: #F2F2F2;
  --ink-2: #C2C2C2;
  --ink-3: #8E8E8E;

  /* Brighter than on black so they read as equally strong on grey. */
  --anchor: #5C85FF;
  --link: #7598FF;

  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-active-bg: rgba(79, 123, 255, 0.18);
  --nav-active-ink: #7598FF;

  --brief-bg: #2C2C2E;
  --row-hover: rgba(255, 255, 255, 0.05);
  --avatar-bg: rgba(255, 255, 255, 0.10);

  --chip-border: rgba(255, 255, 255, 0.28);
  --chip-active-bg: #5C85FF;
  --chip-active-ink: #000000;

  --halo: rgba(79, 123, 255, 0.35);
  --hollow-bg: transparent;
  --cal-muted: rgba(255, 255, 255, 0.03);
  --today-bg: #5C85FF;

  --status-ok-ui: #5FCB8E;
  --wa-green: #25D366;
  /* Error, on-hold and overdue never had dark values: #C0290A, #937717 and
     #B03600 fell to 2.2–3.3:1 on the dark surface, on cream/peach tints that
     glowed as light bars (UI audit 18/10, H3). Same values Calculate already
     uses for its own bad/warn/attention (tokens/calc.css). */
  --status-error: #FF6B4A;
  --status-hold-ink: #E2B45A;
  --status-hold-bg: rgba(226, 180, 90, 0.14);
  --status-overdue-ink: #FF9A6B;
  --status-overdue-bg: rgba(255, 154, 107, 0.12);
  --status-overdue-line: rgba(255, 154, 107, 0.35);

  --surface-sunk: rgba(255, 255, 255, 0.045);
  --surface-sunk-soft: rgba(255, 255, 255, 0.03);
  --surface-tint: rgba(255, 255, 255, 0.04);
  --hair-soft: rgba(255, 255, 255, 0.08);
  --tint-blue: rgba(79, 123, 255, 0.10);
  --tint-blue-2: rgba(79, 123, 255, 0.16);
  --line-blue: rgba(117, 152, 255, 0.40);
  --rule-board: rgba(255, 255, 255, 0.16);
  --ink-fill: #F2F2F2;
  --ink-fill-ink: #1C1C1E;
  --sheet-lift: #3A3A3C;
}

/* Black — the base Grey was drawn from, kept as an option. */
[data-theme="dark"][data-dark-ground="black"] {
  --ground: #000000;
  --rail-bg: #0A0A0A;
  --rail-border: rgba(255, 255, 255, 0.10);
  --surface: #151515;
  --brief-bg: #151515;
  --hair: rgba(255, 255, 255, 0.12);
  --anchor: #4F7BFF;
  --link: #6F93FF;
  --nav-active-ink: #6F93FF;
  --chip-active-bg: #4F7BFF;
  --today-bg: #4F7BFF;
  --line-blue: rgba(111, 147, 255, 0.40);
  --ink-fill-ink: #000000;
  --sheet-lift: #1F1F1F;
}

/* Navy — the dark set Track shipped with until 06/10/2026, kept as an option. */
[data-theme="dark"][data-dark-ground="navy"] {
  --ground: #0C1139;
  --rail-bg: #0A0E2E;
  --rail-border: rgba(255, 255, 255, 0.10);
  --surface: #161A3E;
  --hair: rgba(255, 255, 255, 0.12);
  --ink: #EDEEF5;
  --ink-2: #C9CDE0;
  --ink-3: #9AA0BE;
  --anchor: #9DB6FF;
  --link: #9DB6FF;
  --nav-active-bg: rgba(110, 148, 255, 0.16);
  --nav-active-ink: #9DB6FF;
  --brief-bg: #161A3E;
  --avatar-bg: rgba(255, 255, 255, 0.12);
  --chip-active-bg: #9DB6FF;
  --chip-active-ink: #0C1139;
  --halo: rgba(110, 148, 255, 0.35);
  --today-bg: #9DB6FF;
  --tint-blue: rgba(110, 148, 255, 0.10);
  --tint-blue-2: rgba(110, 148, 255, 0.16);
  --line-blue: rgba(157, 182, 255, 0.40);
  --ink-fill: #EDEEF5;
  --ink-fill-ink: #0C1139;
  --sheet-lift: #1E2350;
}

/* The phone app paints its own navy (tokens/mobile.css); the page behind it must
   not show grey at the overscroll edges. */
[data-theme="dark"] body.is-mobile-app { background: var(--m-bg, #080B24); }

/* The page itself. 240ms is long enough to read as a change of light and short
   enough not to feel like a transition you are waiting on. */
html, body { background: var(--ground); color: var(--ink); }
body { transition: background 240ms var(--ease-out), color 240ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ── The older aliases, re-pointed ──────────────────────────────────────────
   colors.css already had a thin semantic layer of its own (--text-primary,
   --surface-card, --border-hairline and the rest) and much of the app styles
   against those rather than against --brand-* directly. Pointing them here means
   several hundred usages theme without being touched — and means the two
   layers cannot drift into disagreeing about what "muted text" is. */
:root {
  --surface-page: var(--ground);
  --surface-card: var(--surface);
  --card: var(--surface);
  --surface-sunk-2: var(--surface-sunk);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-brand: var(--anchor);

  --border-hairline: var(--hair);
  --border-rule: var(--hair-strong);
  --border-strong: var(--ink);

  --interactive: var(--link);
  --interactive-hover: var(--anchor);

  --status-ok: var(--status-ok-ui);
  --rule-strong: var(--rule-board);
}