/*
  Coding Koala family tokens, v1 (27 Oct 2026). Source of truth for RepoKoala and Guided Selection sites.
  Base: the HQ task page theme (hq-tasks, branch design/coding-koala-theme, src/web/tokens.css).
  Every colour a page uses lives here. components.css only reads these names.
  Brand orange decided by the founder 27 Oct 2026 (task #77): #FF5722.
*/
:root {
  /* ---------- Brand primitives (never change per product) ---------- */
  --brand-orange: #ff5722;
  --brand-navy: #122356;          /* from the CK logo */
  --brand-navy-deep: #0b1638;
  --brand-navy-light: #c9d3f5;    /* navy tint for links, marks and accents on dark grounds */
  --on-ok: #ffffff;               /* text on the green 'Ready to merge' pill */
  --white: #ffffff;

  /* ---------- Neutrals: light (default) ---------- */
  color-scheme: light dark;
  --canvas: #f6f5f2;              /* page ground */
  --surface: #ffffff;             /* panels, cards that hold real content */
  --sunken: #eeece7;              /* wells, code, quiet bands */
  --ink: #161a2c;                 /* body text */
  --muted: #545a6b;               /* secondary text, 6.5:1 on canvas */
  --line: #dddad3;                /* hairlines */
  --line-strong: #b5b2aa;         /* control borders */

  /* ---------- Roles ---------- */
  --action: var(--brand-navy);                    /* buttons, links */
  --action-hover: #1f3a86;
  --on-action: #ffffff;
  --accent: var(--brand-orange);                  /* marks, rules, one highlight per view */
  --accent-ink: color-mix(in oklab, var(--brand-orange) 60%, #000000);  /* orange TEXT: passes 4.5:1 on white */
  --accent-soft: color-mix(in oklab, var(--brand-orange) 9%, var(--surface));
  --on-accent: #161a2c;                           /* text on orange fills: dark, never white */
  --link: var(--brand-navy);
  --focus: var(--brand-navy);       /* 14:1 on canvas; orange ring was under 3:1 on light grounds */
  --ok: #1d6b45;
  --ok-soft: #e6f2ec;
  --error: #b42318;
  --error-soft: #fdecea;
  --band: var(--brand-navy);                      /* full-width statement band */
  --on-band: #f6f5f2;
  --on-band-muted: #b9c1dc;
  --logo-filter: none;

  /* ---------- Product accent slot (set by [data-product]) ---------- */
  --product: var(--brand-orange);
  --product-ink: var(--accent-ink);
  --product-soft: var(--accent-soft);

  /* ---------- Type ---------- */
  /* Same system stack as the HQ task page theme (hq-tasks src/modules/web/page.css), the founder-pinned base. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; /* code, package names, data only */
  --text-xs: .8125rem;   /* 13 */
  --text-sm: .875rem;    /* 14 */
  --text-md: 1rem;       /* 16 body */
  --text-lg: 1.1875rem;  /* 19 lead */
  --text-xl: 1.5rem;     /* 24 h3 */
  --text-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);   /* h2 */
  --text-3xl: clamp(2.375rem, 1.4rem + 4.2vw, 4.25rem);  /* page headline */
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-display: -.03em;
  --tracking-heading: -.015em;
  --weight-body: 400;
  --weight-strong: 650;
  --weight-display: 780;
  --measure: 66ch;

  /* ---------- Space (4px base) ---------- */
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;
  --space-9: 7rem;
  --gutter: 1rem;                 /* phone side gutter */
  --page-max: 72rem;
  --read-max: 46rem;

  /* ---------- Shape and depth ---------- */
  --radius-sm: .375rem;
  --radius-md: .5rem;   /* controls */
  --radius-lg: .75rem;  /* panels */
  --radius-pill: 999px;
  --shadow-panel: 0 1px 2px rgb(22 26 44 / .06), 0 8px 24px -12px rgb(22 26 44 / .18);
  --shadow-lift: 0 2px 4px rgb(22 26 44 / .06), 0 18px 40px -18px rgb(22 26 44 / .32);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 700ms;
}

/* ---------- Product accents ---------- */
/* RepoKoala: the brand orange IS the product colour; diff colours for code illustrations only. */
[data-product="repokoala"] {
  --product: var(--brand-orange);
  --product-ink: var(--accent-ink);
  --product-soft: var(--accent-soft);
  --diff-add: #1d6b45;
  --diff-add-soft: #e3f1e9;
  --diff-del: #b42318;
  --diff-del-soft: #fbe9e7;
}
/* Guided Selection (open format site): navy leads, orange is a single marker. Reads as a standard, not a vendor. */
[data-product="guided-selection"] {
  --product: var(--brand-navy);
  --product-ink: var(--brand-navy);
  --product-soft: color-mix(in oklab, var(--brand-navy) 7%, var(--surface));
  --annotation: #8a5a00;          /* margin notes on the annotated question; 5.6:1 on white */
  --annotation-soft: #fbf3e2;
}

/* ---------- Dark theme (follows the system unless a page pins one) ----------
   Product overrides match data-product on <html> itself AND on a descendant. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0e1120; --surface: #161a2c; --sunken: #1e2337;
    --ink: #eceef5; --muted: #a6abbd; --line: #2b3047; --line-strong: #454b66;
    --action: var(--brand-navy-light); --action-hover: color-mix(in oklab, var(--brand-navy-light) 80%, #ffffff); --on-action: #10131f; /* buttons stay navy-family in dark mode: orange stays the one mark */
    --accent-ink: color-mix(in oklab, var(--brand-orange) 80%, #ffffff);
    --accent-soft: color-mix(in oklab, var(--brand-orange) 12%, var(--surface));
    --link: #c9d3f5; --focus: var(--brand-orange); --ok: #6fd3a0; --ok-soft: #12291f; --error: #ff8f9c; --error-soft: #3b1a24;
    --band: #060914; --on-band: #eceef5; --on-band-muted: #a6abbd;
    --logo-filter: brightness(0) invert(1);
  }
  :root:not([data-theme="light"])[data-product="repokoala"], :root:not([data-theme="light"]) [data-product="repokoala"] { --diff-add: #6fd3a0; --diff-add-soft: #12291f; --diff-del: #ff8f9c; --diff-del-soft: #3b1a24; --product-ink: var(--accent-ink); --product-soft: var(--accent-soft); }
  :root:not([data-theme="light"])[data-product="guided-selection"], :root:not([data-theme="light"]) [data-product="guided-selection"] { --product: #c9d3f5; --product-ink: #c9d3f5; --product-soft: color-mix(in oklab, #c9d3f5 8%, var(--surface)); --annotation: #f0bf5a; --annotation-soft: #2a2312; }
}
:root[data-theme="dark"] {
  --canvas: #0e1120; --surface: #161a2c; --sunken: #1e2337;
  --ink: #eceef5; --muted: #a6abbd; --line: #2b3047; --line-strong: #454b66;
  --action: var(--brand-navy-light); --action-hover: color-mix(in oklab, var(--brand-navy-light) 80%, #ffffff); --on-action: #10131f;
  --accent-ink: color-mix(in oklab, var(--brand-orange) 80%, #ffffff);
  --accent-soft: color-mix(in oklab, var(--brand-orange) 12%, var(--surface));
  --link: #c9d3f5; --focus: var(--brand-orange); --ok: #6fd3a0; --ok-soft: #12291f; --error: #ff8f9c; --error-soft: #3b1a24;
  --band: #060914; --on-band: #eceef5; --on-band-muted: #a6abbd;
  --logo-filter: brightness(0) invert(1);
}
:root[data-theme="dark"][data-product="repokoala"], :root[data-theme="dark"] [data-product="repokoala"] { --diff-add: #6fd3a0; --diff-add-soft: #12291f; --diff-del: #ff8f9c; --diff-del-soft: #3b1a24; --product-ink: var(--accent-ink); --product-soft: var(--accent-soft); }
:root[data-theme="dark"][data-product="guided-selection"], :root[data-theme="dark"] [data-product="guided-selection"] { --product: #c9d3f5; --product-ink: #c9d3f5; --product-soft: color-mix(in oklab, #c9d3f5 8%, var(--surface)); --annotation: #f0bf5a; --annotation-soft: #2a2312; }

@media (min-width: 48rem) { :root { --gutter: 2rem; } }