/* Momentum — the house-style tokens (PR 1, 2026-10-02; PR 8, 2026-10-04: the cream light theme, column stripes, logo tile).
   Source of truth: _env/house-style/palettes.md and web/tokens.css in the claude-memory repo
   (deployed as ~/.claude/HOUSE-STYLE.md). Values are copied from there, never invented here.

   How it plugs in: index.html still declares its old names (--bg, --panel, --accent …) and
   this file, loaded after that block, redefines them in terms of the house roles. The
   identity (company) colour follows <html data-company="ibexx|acclivity|sturdyox">, which
   applyBrand() sets when the workspace switches. The theme follows <html data-theme="dark|light">,
   the EFFECTIVE theme: the person's setting (Match device / Dark / Light, kept on their account) is
   on <html data-theme-setting>, and the script turns "Match device" into dark or light from the
   device's own preference (a device with no preference shows dark).

   Roles (HOUSE-STYLE.md, "The colour roles"):
     identity   the company colour — "through the page": the primary button, the active chip,
                the hover row, a faint tint of every dark surface. Never a badge or a status.
     the six meanings   good / suggested / attention / decision / neutral / fault — fixed.
     rows       four opaque shades for tables — fixed recipe, tinted by the identity. */

/* ── Identity, per company. Ibexx is the default so a page with no attribute is still right. */
:root,
[data-company="ibexx"]     { --color-identity:#d12626; --color-identity-foreground:#ffffff; --color-identity-bright:#e04a4a; --color-identity-text:#f07070; } /* ibexx.com logo red */
[data-company="acclivity"] { --color-identity:#b26b4d; --color-identity-foreground:#ffffff; --color-identity-bright:#d6a588; --color-identity-text:#d6a588; } /* acclivity.cc copper */
[data-company="sturdyox"]  { --color-identity:#fcf000; --color-identity-foreground:#1a1a1a; --color-identity-bright:#fff64d; --color-identity-text:#fcf000; } /* the ox mark's yellow */

:root {
  --color-identity-hover: color-mix(in oklab, var(--color-identity) 85%, black);   /* a filled primary's hover: darker, never brighter */

  /* ── The six meanings (rule 5): a base for borders/fills, a text shade for dark cards (the light theme redefines the -text shades below) */
  --color-good:#10b981;      --color-good-text:#6ee7b7;
  --color-suggested:#3b82f6; --color-suggested-text:#93c5fd;
  --color-attention:#f59e0b; --color-attention-text:#fcd34d;
  --color-decision:#8b5cf6;  --color-decision-text:#c4b5fd;
  --color-neutral:#94a3b8;   --color-neutral-text:#cbd5e1;
  --color-fault:#ef4444;     --color-fault-text:#fca5a5;

  /* ── Column stripes (rule 5, 2026-10-02): a faint wash on every other column, laid OVER the row shade */
  --color-col-stripe: rgba(255, 255, 255, 0.035);

  /* ── The tile the black Ibexx ibex sits on, on a DARK surface (palettes.md "Logos") */
  --color-logo-tile: #f2efe9;

  /* ── The last colours that used to live in index.html (PR 8b, 2026-10-04): every colour value in the app is in THIS file. Both themes. */
  --color-on-fill: #ffffff;                 /* text on a person's or project's own colour (data colours of any hue) and on a status fill */
  --color-scrim: rgba(0, 0, 0, 0.45);       /* the dim behind a dialog, the drawer and the phone menu */
  --color-block-edge: rgba(0, 0, 0, 0.3);   /* the neutral left edge of a task block on the calendar (priority is a label, not a colour) */
  --color-block-plain: color-mix(in oklab, var(--color-neutral) 45%, #1e293b);   /* a calendar task block with no project: a neutral slate, white text reads on it */
  --color-qr-paper: #ffffff;                /* the QR code keeps white paper in both themes, or a phone cannot scan it */
  --shadow-block: 0 1px 3px rgba(0, 0, 0, 0.18);       /* a calendar block */
  --shadow-menu: 0 12px 34px rgba(0, 0, 0, 0.28);      /* the account menu */
  --shadow-toast: 0 6px 20px rgba(0, 0, 0, 0.3);       /* the toast */
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.18);      /* the sign-in card */
  --shadow-sheet: 0 20px 60px rgba(0, 0, 0, 0.35);     /* a dialog */

  /* ── Type: one font on everything (William, 2026-10-01). Inter is linked from Google Fonts in
        index.html; the fallback stack is the same on every project. */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ── Sizes (palettes.md) */
  --gutter:24px; --read-width:80ch; --tile-max:20rem;

  /* ── Momentum's own names, mapped onto the roles (both themes) */
  /* ── People's and projects' own colours (review fixes, 2026-10-04, decision 8). These are DATA: a person or a project is dealt one when it is
        created and the hex is stored with the record, so index.html reads these nine at run time (getComputedStyle) when it assigns a colour.
        Same values in both themes. The order is the order the app deals them in (people take 1-8, projects 1, 3, 4, 9, 5, 6). */
  --person-1:#0984e3; --person-2:#6c5ce7; --person-3:#00b894; --person-4:#e17055; --person-5:#e84393;
  --person-6:#f39c12; --person-7:#00838f; --person-8:#8e44ad; --person-9:#a29bfe;
  /* The strong text colour (palettes.md: titles and values). A person's circle is an outline: ring AND letters in their colour, and where a
     colour as text reads below 3:1 on the resting surfaces (measured, every company) the letters take this instead and the ring keeps the colour. */
  --color-text-strong:#f8fafc;
  /* The letters of a person's circle, per palette colour: the colour itself, or the strong text colour where the colour is under 3:1 as text.
     DARK (worst case over the three companies): 1 blue 2.86, 2 indigo 2.28, 5 pink 2.98, 7 teal 2.45, 8 purple 1.89 need the strong colour. */
  --person-1-text:var(--color-text-strong); --person-2-text:var(--color-text-strong); --person-3-text:var(--person-3); --person-4-text:var(--person-4); --person-5-text:var(--color-text-strong);
  --person-6-text:var(--person-6); --person-7-text:var(--color-text-strong); --person-8-text:var(--color-text-strong); --person-9-text:var(--person-9);

  --accent: var(--color-identity);
  --accent-fg: var(--color-identity-foreground);          /* text on an identity-filled control (dark on Sturdy Ox's yellow) */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--panel));
  --accent-text: var(--accent);                            /* the identity as TEXT: the light theme gives it a shade that reads on cream (never yellow text on cream) */
  --risk: var(--color-fault);
  --ok: var(--color-good);
}
@media (max-width: 639px) { :root { --gutter:16px; } }

/* ── The dark theme: the house "Railway" slate, every surface mixed with a little identity so an
      Ibexx page is a warm red-slate and an Acclivity page a copper-slate at the same contrast. */
:root,   /* no data-theme at all (the first-paint script did not run): dark, the house default */
:root[data-theme="dark"] {
  --bg:    color-mix(in oklab, #0f172a 95%, var(--color-identity) 5%);    /* canvas */
  --panel: color-mix(in oklab, #1e293b 93%, var(--color-identity) 7%);    /* cards, header, table bodies */
  --field: color-mix(in oklab, #172033 92%, var(--color-identity) 8%);    /* inputs, table heads, inset areas */
  --off:   color-mix(in oklab, #172033 92%, var(--color-identity) 8%);
  --line:  color-mix(in oklab, #334155 92%, var(--color-identity) 8%);    /* every hairline */
  --hover: color-mix(in oklab, #1e293b 70%, var(--color-identity) 30%);   /* the row under the pointer */
  --text:#e2e8f0;
  --muted:#94a3b8;
  --event: color-mix(in oklab, #334155 80%, var(--color-identity) 20%);  /* calendar event blocks */
  --color-row-a:     color-mix(in oklab, #19222f 95%, var(--color-identity) 5%);
  --color-row-b:     color-mix(in oklab, #243148 93%, var(--color-identity) 7%);
  --color-row-hover: color-mix(in oklab, #1e293b 70%, var(--color-identity) 30%);
  --color-row-press: color-mix(in oklab, #1e293b 55%, var(--color-identity) 45%);
  --color-col-stripe: rgba(255, 255, 255, 0.035);
}

/* ── The cream LIGHT theme (2026-10-02, palettes.md "The light theme"; Momentum took it in PR 8). Cream, not stark
      white. The surfaces are NOT mixed with the identity (the cream already carries warmth); the identity shows
      through the stripe, rails, underlines, the active chip, the primary button and the hover row, exactly as on dark.
      Momentum's own names (--bg, --panel, --field, --off, --line, --hover, --text, --muted, --event) are mapped onto it,
      so the old white values in index.html's :root no longer matter. */
:root[data-theme="light"] {
  --bg:    #F7F4EF;                                                       /* canvas (Berean's cream) */
  --panel: #FBF9F4;                                                       /* cards, header, table bodies — never #FFFFFF */
  --field: #EFEBE3;                                                       /* sunk: inputs, table heads, inset areas */
  --off:   #EFEBE3;
  --line:  #E3DED4;                                                       /* every hairline */
  --hover: color-mix(in oklab, #FBF9F4 70%, var(--color-identity) 30%);   /* the row / button under the pointer */
  --text:#2C2C2C;
  --muted:#6B6B6B;
  --event: color-mix(in oklab, #334155 80%, var(--color-identity) 20%);  /* calendar event blocks: white text sits on them in both themes */
  /* the six meanings as TEXT on cream: their light-theme text shades (a badge is the pale fill + this dark text) */
  --color-good-text:#047857;      --color-suggested-text:#1d4ed8; --color-attention-text:#92400e;
  --color-decision-text:#5b21b6;  --color-neutral-text:#475569;   --color-fault-text:#b91c1c;
  --color-identity-text: color-mix(in oklab, var(--color-identity) 70%, black);   /* the identity as text on cream: fine for red and copper */
  --accent-text: var(--color-identity-text);
  --risk: var(--color-fault-text);                                        /* "at risk" text on cream: the dark red, not the bright one */
  --ok: var(--color-good-text);
  --color-row-a:     #FBF9F4;
  --color-row-b:     #F3EFE6;
  --color-row-hover: color-mix(in oklab, #FBF9F4 70%, var(--color-identity) 30%);
  --color-row-press: color-mix(in oklab, #FBF9F4 55%, var(--color-identity) 45%);
  --color-col-stripe: rgba(0, 0, 0, 0.028);
  color-scheme: light;
  /* People's circles on cream: the colours under 3:1 as text (3 green 2.21, 4 coral 2.75, 6 orange 1.91, 9 lavender 2.11) use the strong text colour for the letters */
  --color-text-strong:#1a1a1a;
  --person-1-text:var(--person-1); --person-2-text:var(--person-2); --person-3-text:var(--color-text-strong); --person-4-text:var(--color-text-strong); --person-5-text:var(--person-5);
  --person-6-text:var(--color-text-strong); --person-7-text:var(--person-7); --person-8-text:var(--person-8); --person-9-text:var(--color-text-strong);
}
/* Sturdy Ox's yellow is never TEXT on cream: where the identity is text, it is the strong text colour instead. (A filled
   yellow button or chip keeps its #1a1a1a text, which reads fine.) Closes the PR 1 "known gap". */
:root[data-theme="light"][data-company="sturdyox"] { --color-identity-text:#1A1A1A; }

/* ── The keyboard focus ring is the identity on every company (rule: the ring is identity) */
:focus-visible { outline: 2px solid var(--color-identity); outline-offset: 2px; }