/* 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"] {
  /* Backdrop behind dialogs, panels and sheets: navy over the light app, neutral
     black over every dark ground (a navy veil turned the Grey app blue, 25/10). */
  --scrim-rgb: 12, 17, 57;
  --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;
  --today-ink: #FFFFFF;            /* the date on today's filled circle (Calendar) */
  --cal-today-cell: #EEF3FD;       /* today's day cell, a shade under --tint-blue-2 */
  --cal-week-bg: #F8FAFE;          /* this week's row, fainter than today */

  --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 */
  /* Orange as TEXT (counts, eyebrows, "old" dates). The brand orange itself
     never changes; on the Grey dark surface it fell to 4.25:1, so the ink is a
     step lighter there only (25/10/2026). */
  --attn-ink: #FF5001;
  --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;

  /* ── Calendar chips (Issue 25/10/2026: "each person/activity type given a
     different colour"). A fill and the text drawn on it, every pair 6.3:1 or
     better. TYPE: four families that cannot be confused — blue site, violet
     meeting, amber CPD, green leave — and a neutral for anything else.
     PERSON: ten slots, assigned by sorted user id (calendar-model.js), ordered
     so neighbouring slots are far apart in hue (blue, orange, teal, magenta,
     amber, violet, green, rose, slate, brown); the ink doubles as the person's
     bar on a leave chip. */
  --cal-site-bg: #DCE6FB;
  --cal-site-ink: #173A8F;
  --cal-meeting-bg: #E9E1FA;
  --cal-meeting-ink: #4A2C93;
  --cal-cpd-bg: #FAE7BE;
  --cal-cpd-ink: #6A4300;
  --cal-leave-bg: #D5EDDC;
  --cal-leave-ink: #155A36;
  --cal-misc-bg: #ECECEA;
  --cal-misc-ink: #3C3E4F;
  --cal-p1-bg: #DCE6FB;    /* blue */
  --cal-p1-ink: #1A3E99;
  --cal-p2-bg: #FBDCCB;    /* orange */
  --cal-p2-ink: #8A3300;
  --cal-p3-bg: #CFECE9;    /* teal */
  --cal-p3-ink: #0D5751;
  --cal-p4-bg: #F3DAF0;    /* magenta */
  --cal-p4-ink: #781C6C;
  --cal-p5-bg: #F7E6BF;    /* amber */
  --cal-p5-ink: #6B4700;
  --cal-p6-bg: #E6DEFA;    /* violet */
  --cal-p6-ink: #482C93;
  --cal-p7-bg: #DCEFD3;    /* green */
  --cal-p7-ink: #2D5B18;
  --cal-p8-bg: #F8DAE0;    /* rose */
  --cal-p8-ink: #8C1D34;
  --cal-p9-bg: #DEE2EC;    /* slate */
  --cal-p9-ink: #2C3858;
  --cal-p10-bg: #E8E0D2;   /* brown */
  --cal-p10-ink: #574326;

  /* ── Time off (Calendar and leave, v4.5.0, Karan's design 25/10/2026).
     Off is a deep navy bar with white words; working from home a pale blue
     chip; on site an outlined chip; over the limit an orange pill, filled when
     it is booked, outlined when it is over only if what is asked is approved.
     Every text pair 4.5:1 or better on its own fill. */
  --tro-off-bg: #1B2C7E;
  --tro-off-ink: #FFFFFF;
  --tro-home-bg: #E6EDFC;
  --tro-home-ink: #173A8F;
  --tro-over-bg: #C24100;
  --tro-over-ink: #FFFFFF;
  --tro-over-line: #FF5001;
  --tro-over-tint: #FFF6F1;
  --tro-ok-bg: #EAF6EF;
  --tro-ok-ink: #1C6A41;
  --tro-mine-bg: #C24100;
  --tro-mine-ink: #FFFFFF;

  /* ── Where a figure came from (Expenses and mileage, build pack 26/10/2026).
     The miles field and the receipt form say where each number came from:
     From the route / From the receipt (blue), Edited / Suggested (grey), and
     Over / Under / Check (orange, with the orange border on the field). The
     light values are the pack's own. */
  --tag-route-bg: #EAF0FD;
  --tag-route-ink: #0A40C0;
  --tag-edited-bg: #F0F0EE;
  --tag-edited-ink: #4A4E68;
  --tag-over-bg: #FFF4EE;
  --tag-over-ink: #C2410C;
  --tag-over-line: #FF5001;

  /* ── The Roadmap's six themes (Karan's brief 27/10/2026): the stripe on a
     card, the dot on a filter chip and the theme tag. The light values are the
     seed's own; the dark ones the approved board's. */
  --rm-platform: #10328B;
  --rm-workspace: #0E7C6B;
  --rm-engineering: #8A4FD8;
  --rm-intel: #D14B7A;
  --rm-finance: #B7791F;
  --rm-growth: #E2531A;
}

/* ── 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"] {
  --scrim-rgb: 0, 0, 0;
  --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: #A0A0A0;   /* was #8E8E8E: 4.25:1 on --surface, under AA; #A0A0A0 is 5.3:1 (25/10/2026) */

  /* 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;
  --today-ink: #000000;
  --cal-today-cell: rgba(92, 133, 255, 0.14);
  --cal-week-bg: rgba(92, 133, 255, 0.05);

  --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);
  --attn-ink: #FF7A3D;
  --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;

  /* Calendar chips: the same hues as tints over the grey, light text on them
     (5.7:1 or better on --surface). */
  --cal-site-bg: rgba(110, 150, 255, 0.28);
  --cal-site-ink: #C6D5FF;
  --cal-meeting-bg: rgba(160, 130, 255, 0.28);
  --cal-meeting-ink: #D6CBFF;
  --cal-cpd-bg: rgba(230, 180, 70, 0.26);
  --cal-cpd-ink: #F3D795;
  --cal-leave-bg: rgba(95, 203, 142, 0.24);
  --cal-leave-ink: #AEE8C5;
  --cal-misc-bg: rgba(255, 255, 255, 0.10);
  --cal-misc-ink: #E4E4E6;
  --cal-p1-bg: rgba(110, 150, 255, 0.28);
  --cal-p1-ink: #C6D5FF;
  --cal-p2-bg: rgba(255, 140, 80, 0.26);
  --cal-p2-ink: #FFC6A6;
  --cal-p3-bg: rgba(45, 190, 180, 0.26);
  --cal-p3-ink: #A3E6DF;
  --cal-p4-bg: rgba(225, 110, 210, 0.26);
  --cal-p4-ink: #F4BDEC;
  --cal-p5-bg: rgba(230, 180, 70, 0.26);
  --cal-p5-ink: #F3D795;
  --cal-p6-bg: rgba(160, 130, 255, 0.28);
  --cal-p6-ink: #D6CBFF;
  --cal-p7-bg: rgba(110, 200, 90, 0.24);
  --cal-p7-ink: #C0E7B1;
  --cal-p8-bg: rgba(255, 100, 130, 0.26);
  --cal-p8-ink: #FFBCC9;
  --cal-p9-bg: rgba(150, 165, 200, 0.24);
  --cal-p9-ink: #CDD5E8;
  --cal-p10-bg: rgba(190, 160, 110, 0.26);
  --cal-p10-ink: #E5D5B7;

  /* Time off: Off flips to a light blue bar with near-black words, so it still
     reads as the strongest mark on a dark grey page. */
  --tro-off-bg: #8EA9FF;
  --tro-off-ink: #0B1033;
  --tro-home-bg: rgba(110, 150, 255, 0.24);
  --tro-home-ink: #C6D5FF;
  --tro-over-bg: #FF7A3D;
  --tro-over-ink: #1C0A00;
  --tro-over-line: #FF7A3D;
  --tro-over-tint: rgba(255, 122, 61, 0.08);
  --tro-ok-bg: rgba(95, 203, 142, 0.16);
  --tro-ok-ink: #AEE8C5;
  --tro-mine-bg: #FF7A3D;
  --tro-mine-ink: #1C0A00;

  /* Where a figure came from: the same three families as tints over the
     grey, light text on them (every pair 4.5:1 or better on --surface). */
  --tag-route-bg: rgba(110, 150, 255, 0.20);
  --tag-route-ink: #B4C8FF;
  --tag-edited-bg: rgba(255, 255, 255, 0.10);
  --tag-edited-ink: #D4D6E0;
  --tag-over-bg: rgba(255, 122, 61, 0.14);
  --tag-over-ink: #FFAB80;
  --tag-over-line: #FF7A3D;

  /* The Roadmap's themes, lifted for the dark ground (the approved board's values). */
  --rm-platform: #7E9BFF;
  --rm-workspace: #3CC4AE;
  --rm-engineering: #B48CFF;
  --rm-intel: #F07AA3;
  --rm-finance: #E8B04E;
  --rm-growth: #FF8A55;
}

/* 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;
  --attn-ink: #FF5001;
}

/* 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);
  --attn-ink: #FF5001;
  --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);
}