/* The theme-independent tokens. Every colour a component reads is defined in a
   theme file (kit/themes/<product>.css, generated from the product's setup) in
   all four modes; what lives here is either not a colour or is mixed from the
   theme's colours, so it follows every mode for free.

   No colour literal may appear in any other kit/css file: tools/check.mjs fails
   the build on one. Status colours are the exception that proves it: they are
   the same hues in every product, so they are defined here, per mode. */

/* Type: the reader's system face (--font, from derive.js: system-ui, -apple-system,
   "Segoe UI", sans-serif) at 15px / 1.5 for body copy, +0.3px tracking set once on
   <body> and inherited everywhere — never tightened, never widened per element.
   Every size is a step of the scale below; no component types a pixel size. */

:root {
  /* Product UI takes a fixed rem scale at a 1.2 ratio, not the marketing
     pages' clamp() sizes: a heading that shrinks in a sidebar reads as a bug. */
  --t-3: .6875rem;   /* 11px: a count badge, a tab-bar label, a chart axis — nothing longer */
  --t-2: .75rem;
  --t-1: .8125rem;
  --t0: .9375rem;
  --t1: 1.0625rem;
  --t2: 1.25rem;
  --t3: 1.5rem;
  --t4: 1.875rem;
  --t5: 2.375rem;

  /* One spacing rhythm, the castomo.com scale. */
  --s-2: 2px;
  --s-1: 4px;
  --s0: 8px;
  --s1: 12px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;

  --radius-sm: 8px;
  --radius-pill: 999px;
  --target: 44px;         /* the smallest thing a thumb is asked to hit (§0.7) */
  --control-h: 40px;      /* a desktop control; it grows to --target under coarse pointers */
  --bar-h: 64px;
  --tabbar-h: 64px;
  --wrap: 1320px;         /* the ecosystem width standard (§0.1) */
  /* The setup's spacing arrives as --setup-*, and the kit's own rules (phone
     gutters, compact density) override these three: a theme file's selector
     is more specific than any rule here, so it must not set them directly. */
  --gap: var(--setup-gap, 20px);
  --pad: var(--setup-pad, 32px);
  --card-pad: var(--setup-card-pad, 24px);
  --measure: 68ch;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* Mixed from the theme, so each follows the mode it is read in. */
  --rule: color-mix(in oklab, var(--ink) 11%, var(--paper-2));
  --rule-strong: color-mix(in oklab, var(--ink) 22%, var(--paper-2));
  --rule-w: 1px;
  --field: color-mix(in oklab, var(--ink) 5%, var(--paper-2));
  --field-hover: color-mix(in oklab, var(--ink) 8%, var(--paper-2));
  /* The chosen segment: the card's own white in light; in dark a lifted grey, because
     paper-2 on the field sank below its track and read as "nothing to choose here". */
  --segment-on: var(--paper-2);
  --hover: color-mix(in oklab, var(--ink) 5%, transparent);
  --press: color-mix(in oklab, var(--ink) 9%, transparent);
  --accent-soft: color-mix(in oklab, var(--accent-ink) 13%, transparent);
  --accent-wash: color-mix(in oklab, var(--accent-ink) 7%, var(--paper-2));
  --accent-hover: color-mix(in oklab, var(--accent) 86%, var(--ink));
  --scrim: color-mix(in oklab, var(--paper) 30%, rgb(0 0 0 / .55));
  --focus: var(--accent-ink);

  /* The castomo wash (guidelines §2.1), kept faint for a working screen. */
  --wash: linear-gradient(22deg, transparent 20%, color-mix(in oklab, var(--ink) 4%, transparent) 90%);

  --ok: #0E7C3A;
  --warn: #8A5200;
  --bad: #C2261A;
  --info: #1D5FB8;

  /* Support view (72-support-view.css): castomo staff inside a customer's
     account. Fixed, not the brand's, and the same in light and dark, so the
     bar means one thing in every product. White on it is 5.2:1; editing is a
     deeper, redder tone (7.0:1), because editing is the one to notice. */
  --support: #A8560B;
  --support-edit: #A3300B;
  --on-support: #FFFFFF;

  /* The two middle stops a drawing is toned with (90-art.css): the brand's
     own ramp, raw, exactly as the website tones it — the theme writes
     --brand-1..3 untouched by any contrast walk, because art is not text. */
  --art-1: var(--brand-1, var(--accent));
  --art-2: var(--brand-3, var(--accent-2));
  /* The ramp's middle, for the flat-vector kit (Andy) that paints three
     brand colours rather than toning with two: teal, red and orange in the
     pack become --brand-1, -2 and -3, as castomo.com paints them. */
  --art-3: var(--brand-2, var(--art-1));
  /* Andy's clothing and hair (the pack's navy and plum). As drawn on a light
     ground; the dark themes lift them, or a dark jacket vanishes into a dark
     page (the kit-ink trap the 2026 sites fell into). */
  --art-ink: #302D43;
  --art-ink-2: #573957;
  /* The pen and the sheet of a line-drawn kit (Minimalistic, clickSomo's): its
     near-black line work is the text's own ink and its white is the card's
     surface. Both are per-mode tokens already, so the drawing turns with every
     theme by itself — light lines on the dark card in dark, pure black and white
     in high contrast — with no fourth set of colours to keep in step. */
  --art-pen: var(--ink);
  --art-sheet: var(--paper-2);
  /* Its two accents (the pack's red and violet, largest first) and a third for
     a piece with more: the brand ramp, as Andy's. High contrast greys them like
     every drawing; high-contrast dark turns the greys round (below), because the
     darkest grey filling a figure's clothes on a black card reads as a hole. */
  --art-mark-1: var(--art-1);
  --art-mark-2: var(--art-3);
  --art-mark-3: var(--art-2);
  /* The second accent as a drawing wears it (Occupation's coral): the theme's own accent-2, which a
     product's setup can make a second hue. High contrast greys it like every drawing (below). */
  --art-accent-2: var(--accent-2);

  /* Six colours a game tells apart (71-rewards.css, Flood). Fixed, NOT the
     brand's: a green product's accent, success and art tones are three greens,
     and a board built from them cannot be played. The Okabe–Ito set, chosen
     because it stays distinguishable under the common colour-vision
     deficiencies; the same six in light and dark. */
  --game-1: #E69F00;
  --game-2: #56B4E9;
  --game-3: #009E73;
  --game-4: #F0E442;
  --game-5: #0072B2;
  --game-6: #CC79A7;
  /* What is drawn ON a game colour: dark in every theme, because the six are
     mid-to-light in every theme. */
  --game-ink: #1B1B1F;

  /* Medal metals (71-rewards.css): the four badge tiers, each a light, a mid
     and a deep stop for the struck-metal gradient, and one engraving ink that
     reads on all three. Fixed, not the brand's: gold must look like gold in
     every product, or a badge stops meaning "rare". */
  --medal-bronze-1: #F6C9A0;
  --medal-bronze-2: #C9824A;
  --medal-bronze-3: #8A4B22;
  --medal-silver-1: #FFFFFF;
  --medal-silver-2: #C4CAD3;
  --medal-silver-3: #7D8794;
  --medal-gold-1: #FFF1B8;
  --medal-gold-2: #F2BC2E;
  --medal-gold-3: #A86A00;
  --medal-platinum-1: #F3F0FF;
  --medal-platinum-2: #B8A8F0;
  --medal-platinum-3: #5B45B8;
  --medal-ink: #2A1A08;
  --medal-shine: rgb(255 255 255 / .75);
  --coin-1: #FFE38A;
  --coin-2: #F2B21B;
  --coin-3: #B57300;
  --flame-1: #FFE17A;
  --flame-2: #FF9F1C;
  --flame-3: #E5461F;
}

:root[data-theme="dark"] {
  --ok: #5FD898;
  --warn: #FFC46B;
  --bad: #FF8D81;
  --info: #8AB8FF;
  --rule: color-mix(in oklab, var(--ink) 12%, var(--paper-2));
  --scrim: rgb(0 0 0 / .66);
  --segment-on: color-mix(in oklab, var(--ink) 16%, var(--paper-2));
  --art-ink: #CFD0E6;
  --art-ink-2: #E3C7E3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ok: #5FD898;
    --warn: #FFC46B;
    --bad: #FF8D81;
    --info: #8AB8FF;
    --scrim: rgb(0 0 0 / .66);
    --segment-on: color-mix(in oklab, var(--ink) 16%, var(--paper-2));
    --art-ink: #CFD0E6;
    --art-ink-2: #E3C7E3;
  }
}
:root[data-theme="contrast"] {
  --ok: #005A24;
  --warn: #6B3F00;
  --bad: #A81208;
  --info: #0B3F8A;
  --support: #7A3E00;
  --support-edit: #7A1A00;
  --art-ink: #111111;
  --art-ink-2: #3A3A3A;
}
:root[data-theme="contrast-dark"] {
  --ok: #7FFF9F;
  --warn: #FFE066;
  --bad: #FF8D81;
  --info: #A8CBFF;
  --support: #7A3E00;
  --support-edit: #7A1A00;
  --art-ink: #F2F2F2;
  --art-ink-2: #D0D0D0;
  --art-mark-1: #C8C8C8;
  --art-mark-2: #7A7A7A;
  --art-mark-3: #3D3D3D;
}
/* High contrast: edges instead of shadows, heavier rules, no washes. */
:root[data-theme^="contrast"] {
  --rule: var(--ink);
  --rule-strong: var(--ink);
  --rule-w: 2px;
  --field: var(--paper-2);
  --field-hover: var(--paper-2);
  --wash: none;
  --accent-soft: transparent;
  --accent-wash: var(--paper-2);
  /* A drawing in high contrast is greyscale: no brand hue to lean on. */
  --art-1: #3D3D3D;
  --art-2: #C8C8C8;
  --art-3: #7A7A7A;
  --art-accent-2: var(--art-mark-1);
}
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --rule: var(--ink);
    --rule-strong: var(--ink);
    --rule-w: 2px;
    --wash: none;
    --accent-soft: transparent;
    --art-1: #3D3D3D;
    --art-2: #C8C8C8;
    --art-3: #7A7A7A;
    --art-accent-2: var(--art-mark-1);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --art-mark-1: #C8C8C8;
    --art-mark-2: #7A7A7A;
    --art-mark-3: #3D3D3D;
  }
}

/* The reader's own preferences, set by the display menu, stored on <html>. */
/* Text size, one of four: smaller, regular (nothing stored), larger, big. The whole rem scale follows. */
:root[data-size="small"] { font-size: calc(var(--base-size, 16px) * .9375); }
:root[data-size="large"] { font-size: calc(var(--base-size, 16px) * 1.125); }
:root[data-size="big"] { font-size: calc(var(--base-size, 16px) * 1.25); }
:root[data-density="compact"] {
  --s2: 12px;
  --s3: 16px;
  --s4: 24px;
  --card-pad: 16px;
  --gap: 12px;
  --control-h: 34px;
}
@media (pointer: coarse) {
  :root { --control-h: var(--target); }
}