/* ============================================================================
   coommit-system.css — the Coommit style, written once (DESIGN.md).

   Every surface built or reworked from 2026-10-20 on takes its values from
   here, and only from here: one accent, four radii, two shadows, eight text
   sizes, one easing. Older rules keep their literals until their surface is
   reworked (a token file that rewrote 654 box-shadows at once would be a
   rewrite, not a fix). The names are prefixed --cs- so they can never collide
   with the room's --bg0/--ink or the app's --r-* while both still exist.

   Light is the default; the room's dark theme overrides the colours below.
   Guest pages are always light (they set data-theme="light").
   ============================================================================ */
:root{
  /* Colour: ink for text, one accent, and the two states the call needs. */
  --cs-ink:#1d1f2b;            /* titles, body on paper (15.9:1 on white) */
  --cs-text:#4a5060;           /* secondary text (8.0:1) */
  --cs-muted:#6b7183;          /* hints, captions (4.9:1) */
  --cs-line:#e3e4ea;           /* hairlines, card edges */
  --cs-field:#d5d7df;          /* input and secondary-button edges */
  --cs-board:#ecedf1;          /* the canvas under the dots */
  --cs-paper:#ffffff;          /* cards, bars, popovers */
  --cs-accent:#6366f1;         /* fills only: primary buttons, Echo, focus */
  --cs-accent-ink:#4f46e5;     /* accent as text and links (6.3:1) */
  --cs-accent-wash:#f4f4fe;    /* Echo's bar and selected states */
  --cs-accent-line:#d9daf7;
  --cs-live:#16a34a;           /* in a call */
  --cs-danger:#dc2626;         /* leave, end, delete */
  --cs-inverse-bg:#1d1f2b;     /* toasts: the one dark surface on a light page */
  --cs-inverse-ink:#ffffff;
  --cs-inverse-link:#c7c9f8;

  /* Shape: four radii, nothing in between. */
  --cs-r-chip:6px;             /* chips, badges, small tags */
  --cs-r-control:10px;         /* buttons, inputs, toasts, menu items */
  --cs-r-card:16px;            /* cards, bars, popovers, dialogs, tiles */
  --cs-r-round:999px;          /* faces and the Echo bar's ends only */

  /* Depth: none on the board, a hairline-plus for bars, one drop for what
     opens over the page. */
  --cs-shadow-bar:0 1px 2px rgba(20,22,40,.06);
  --cs-shadow-pop:0 12px 32px rgba(20,22,40,.12);

  /* Type: Manrope everywhere, eight sizes, figures tabular where they count. */
  --cs-sans:'Manrope', -apple-system, ui-sans-serif, system-ui, sans-serif;
  --cs-text-xs:12px;
  --cs-text-sm:13px;
  --cs-text-base:14px;
  --cs-text-md:15px;
  --cs-text-lg:17px;
  --cs-text-xl:20px;
  --cs-text-2xl:24px;
  --cs-text-3xl:32px;

  /* Space: a 4px grid. */
  --cs-space-1:4px;
  --cs-space-2:8px;
  --cs-space-3:12px;
  --cs-space-4:16px;
  --cs-space-5:20px;
  --cs-space-6:24px;
  --cs-space-7:32px;
  --cs-space-8:40px;

  /* Motion: colour and opacity only, never a bounce, never a hover lift. */
  --cs-ease:cubic-bezier(.2,.7,.2,1);
  --cs-dur-fast:120ms;
  --cs-dur:160ms;
  --cs-dur-slow:240ms;
}

/* The room's dark theme. Same roles, values tuned for #18191c. */
[data-theme="dark"]{
  --cs-ink:#eceef3;
  --cs-text:#b9bdc9;
  --cs-muted:#8f94a3;
  --cs-line:rgba(255,255,255,.08);
  --cs-field:rgba(255,255,255,.16);
  --cs-board:#18191c;
  --cs-paper:#212225;
  --cs-accent-ink:#a5b4fc;
  --cs-accent-wash:rgba(99,102,241,.14);
  --cs-accent-line:rgba(129,140,248,.35);
  --cs-live:#22c55e;
  --cs-danger:#ef4444;
  --cs-inverse-bg:#f1f2f6;
  --cs-inverse-ink:#1d1f2b;
  --cs-inverse-link:#4f46e5;
  --cs-shadow-bar:0 1px 2px rgba(0,0,0,.4);
  --cs-shadow-pop:0 12px 32px rgba(0,0,0,.45);
}

@media (prefers-reduced-motion: reduce){
  :root{ --cs-dur-fast:0ms; --cs-dur:0ms; --cs-dur-slow:0ms; }
}

/* ---- The Wada palette (2026-10-25: Alex, "no vibe-coded look") -----------
   One colour from Sanzo Wada, "A Dictionary of Color Combinations"
   (Seigensha, 2010 edition), combination 309: Golden Yellow #f3a257,
   Apricot Orange #f68c50, Violet Blue #40456a, Vandar Poel's Blue #064f6e.
   Hex from the mattdesl/dictionary-of-colour-combinations digitisation of
   the printed CMYK swatches: close, not exact. We paint only Violet Blue,
   the quiet shade of our indigo; the yellow and orange of 309 are the ring
   of the Garage&co mark, so a co-branded page holds one combination.
   Coommit's indigo stays the one accent. */
:root{
  --cs-wada-violet-blue:#40456a;
  --cs-ink-2:var(--cs-wada-violet-blue); /* text read second: 9.2:1 on white, 8.5:1 on #f5f5f8 */
  --cs-primary:#4f46e5;                   /* primary button fill, both themes (white label 6.3:1) */
  --cs-primary-hover:#4338ca;             /* 7.9:1 */
  --cs-quiet:#f0f1f3;                     /* neutral button: one flat fill, no edge */
  --cs-quiet-hover:#e4e6ea;
}
[data-theme="dark"]{
  --cs-ink-2:#b9bdc9;                    /* = dark --cs-text, 9.6:1 on #16161e */
  --cs-quiet:rgba(255,255,255,.08);
  --cs-quiet-hover:rgba(255,255,255,.13);
}