/*
 * brand/tokens.css — the Skunkworks School palette. SOURCE OF TRUTH.
 *
 * Every app under the Skunkworks name (this site, the daily chart, the typing
 * app) draws its colours from these roles. Apps COPY this file; they never
 * load it from skunkworks.school at runtime: the typing app forbids outside
 * fetches and a stylesheet from elsewhere would make every app's look depend
 * on this site being up. See docs/adr/0003 and 0009. This file is served
 * publicly, so no unreleased product names here.
 *
 * Schemes (2026-11-10, ADR 0009). Four, each in dark and light, built the way
 * iOS and Material 3 build theirs: tonal greys carrying a faint tint of the
 * scheme's hue (iOS grouped backgrounds, Material surface containers) under
 * one saturated accent. In dark the accent is a light tone with dark text on
 * it (Material's primary-80 / on-primary); in light it is a deep tone with
 * white text. Every value was generated in OKLCH on the same lightness steps,
 * so the four schemes behave alike and only their hue differs:
 *
 *   coral  (default)  :root, :root[data-mode="light"]
 *   ocean             :root[data-scheme="ocean"], …[data-mode="light"]
 *   grape, mint       likewise
 *
 * settings.js sets data-scheme from sk_scheme (absent for coral) and data-mode
 * from sk_mode. Dark is the default whatever the OS says. A scheme block must
 * define every colour role, because its dark block is what overrides coral's
 * light one; `node scripts/check-contrast.mjs` fails a scheme that leaves one
 * out, and gates every scheme alike.
 *
 * Coral is the brand: the Deep Vintage Mood navy, cream and terracotta of
 * 2026-10 (ADR 0003), modernised: near-black teal instead of navy, warm paper
 * instead of cream, the same coral accent, navy text in light.
 *
 * Roles, not hues: pages say `--sk-accent`, never "orange". band and highlight
 * are fills; text on them uses on-band / on-highlight. highlight is a tonal
 * container (Material's secondary container) for tags and notices.
 *
 * Layers (2026-11-04, docs/DESIGN.md D1; read as Material 3 since
 * 2026-11-11, DESIGN.md "Material"). Depth comes from tone, not lines or
 * blur. The roles keep their names; this is what each is in Material 3:
 *
 *   bg         surface                      the page
 *   surface    surface container            cards, list items, the nav bar,
 *                                           a top app bar once scrolled
 *   surface-2  surface container high       sheets, dialogs, menus
 *   fill       surface container highest    tracks, icon containers, a
 *                                           disabled button
 *   raised     one step above fill          a thumb on a track
 *   fg, muted  on-surface, on-surface-variant
 *   accent     primary (on-accent: on-primary)
 *   highlight  secondary container          the nav indicator, a chosen
 *                                           segment, tonal buttons, chips
 *   border     outline                      separator: outline-variant
 *   fg as a fill, with bg as its text       inverse surface (the snackbar);
 *   inverse-accent                          its action (inverse primary)
 *
 * border is a CONTROL edge only (text fields, unchecked boxes, a switch that
 * is off, outlined buttons) and is gated at 3:1. Lines around decoration use
 * separator, which is translucent and not gated (decorative); it is literal
 * per scheme, not color-mix(), so older tablets still get it. reward is stars
 * and points, nothing else. There is no glass: chrome is a solid tone.
 *
 * Accent discipline (ADR 0003): the one primary action per view, selected
 * states, links and the focus ring. Nothing else. Every accent is 4.5:1 as
 * text on bg, surface and surface-2, and 3:1 on fill (a selected state there,
 * not text). band is a tone of the page for section stripes. danger is a red
 * apart from the accent, and an error also carries an icon or label (coral's
 * accent is red-orange too).
 */

/* Coral — the brand and the default: coral on deep teal (dark), on warm paper (light) */
:root {
  color-scheme: dark;
  --sk-bg: #041115;
  --sk-surface: #0c1c21;
  --sk-surface-2: #14262c;
  --sk-fill: #1e3137;
  --sk-raised: #304349;
  --sk-fg: #eef5f7;
  --sk-muted: #adbec3;
  --sk-accent: #ff9272;
  --sk-on-accent: #361309;
  --sk-band: #0c1c21;
  --sk-on-band: #eef5f7;
  --sk-highlight: #0c4453;
  --sk-on-highlight: #cfeef8;
  --sk-success: #86df9a;
  --sk-danger: #fba8a0;
  --sk-reward: #ffd16b;
  --sk-border: #728489;
  --sk-separator: rgb(173 190 195 / 0.16);
  --sk-inverse-accent: #b5360e;
}

:root[data-mode="light"] {
  color-scheme: light;
  --sk-bg: #f5f0ea;
  --sk-surface: #fefdfc;
  --sk-surface-2: #ffffff;
  --sk-fill: #e8e2da;
  --sk-raised: #ffffff;
  --sk-fg: #17303b;
  --sk-muted: #5a544d;
  --sk-accent: #b5360e;
  --sk-on-accent: #ffffff;
  --sk-band: #ece5db;
  --sk-on-band: #17303b;
  --sk-highlight: #f5d8c1;
  --sk-on-highlight: #3e2104;
  --sk-success: #146d34;
  --sk-danger: #a51f1e;
  --sk-reward: #8a5600;
  --sk-border: #8e8880;
  --sk-separator: rgb(23 48 59 / 0.13);
  --sk-inverse-accent: #ff9272;
}

/* Ocean — iOS-style blue on near-neutral greys */
:root[data-scheme="ocean"] {
  color-scheme: dark;
  --sk-bg: #0b0f13;
  --sk-surface: #161a1f;
  --sk-surface-2: #1f2329;
  --sk-fill: #2a2e34;
  --sk-raised: #3c4046;
  --sk-fg: #f0f4f9;
  --sk-muted: #b7bbc0;
  --sk-accent: #77baff;
  --sk-on-accent: #0b2039;
  --sk-band: #161a1f;
  --sk-on-band: #f0f4f9;
  --sk-highlight: #273e5c;
  --sk-on-highlight: #d9eaff;
  --sk-success: #86df9a;
  --sk-danger: #fba8a0;
  --sk-reward: #ffd16b;
  --sk-border: #7c8186;
  --sk-separator: rgb(183 187 192 / 0.16);
  --sk-inverse-accent: #0065d2;
}

:root[data-scheme="ocean"][data-mode="light"] {
  color-scheme: light;
  --sk-bg: #eef1f6;
  --sk-surface: #fdfdfe;
  --sk-surface-2: #ffffff;
  --sk-fill: #dfe3e9;
  --sk-raised: #ffffff;
  --sk-fg: #171b20;
  --sk-muted: #52565b;
  --sk-accent: #0065d2;
  --sk-on-accent: #ffffff;
  --sk-band: #e1e7ee;
  --sk-on-band: #171b20;
  --sk-highlight: #cbe0fc;
  --sk-on-highlight: #132946;
  --sk-success: #146d34;
  --sk-danger: #a51f1e;
  --sk-reward: #8a5600;
  --sk-border: #858a8f;
  --sk-separator: rgb(23 27 32 / 0.13);
  --sk-inverse-accent: #77baff;
}

/* Grape — Material-style violet on violet-tinted greys */
:root[data-scheme="grape"] {
  color-scheme: dark;
  --sk-bg: #0f0d14;
  --sk-surface: #1a1820;
  --sk-surface-2: #24212a;
  --sk-fill: #2f2c35;
  --sk-raised: #413e48;
  --sk-fg: #f4f2f8;
  --sk-muted: #bbb9c2;
  --sk-accent: #bda8fc;
  --sk-on-accent: #211a33;
  --sk-band: #1a1820;
  --sk-on-band: #f4f2f8;
  --sk-highlight: #423658;
  --sk-on-highlight: #ebe3fc;
  --sk-success: #86df9a;
  --sk-danger: #fba8a0;
  --sk-reward: #ffd16b;
  --sk-border: #817e88;
  --sk-separator: rgb(187 185 194 / 0.16);
  --sk-inverse-accent: #734dbe;
}

:root[data-scheme="grape"][data-mode="light"] {
  color-scheme: light;
  --sk-bg: #f2f0f7;
  --sk-surface: #fefdff;
  --sk-surface-2: #ffffff;
  --sk-fill: #e4e1ea;
  --sk-raised: #ffffff;
  --sk-fg: #1c1921;
  --sk-muted: #56545c;
  --sk-accent: #734dbe;
  --sk-on-accent: #ffffff;
  --sk-band: #e7e4ef;
  --sk-on-band: #1c1921;
  --sk-highlight: #e2d8f8;
  --sk-on-highlight: #2e2142;
  --sk-success: #146d34;
  --sk-danger: #a51f1e;
  --sk-reward: #8a5600;
  --sk-border: #8a8791;
  --sk-separator: rgb(28 25 33 / 0.13);
  --sk-inverse-accent: #bda8fc;
}

/* Mint — green on green-tinted greys */
:root[data-scheme="mint"] {
  color-scheme: dark;
  --sk-bg: #08100d;
  --sk-surface: #121c18;
  --sk-surface-2: #1b2622;
  --sk-fill: #26312c;
  --sk-raised: #37433e;
  --sk-fg: #eef5f2;
  --sk-muted: #b3bdb9;
  --sk-accent: #61d19a;
  --sk-on-accent: #022716;
  --sk-band: #121c18;
  --sk-on-band: #eef5f2;
  --sk-highlight: #10473b;
  --sk-on-highlight: #d1f0e6;
  --sk-success: #86df9a;
  --sk-danger: #fba8a0;
  --sk-reward: #ffd16b;
  --sk-border: #78837f;
  --sk-separator: rgb(179 189 185 / 0.16);
  --sk-inverse-accent: #007d50;
}

:root[data-scheme="mint"][data-mode="light"] {
  color-scheme: light;
  --sk-bg: #ebf3f0;
  --sk-surface: #fcfefd;
  --sk-surface-2: #ffffff;
  --sk-fill: #dbe6e1;
  --sk-raised: #ffffff;
  --sk-fg: #131d19;
  --sk-muted: #4e5854;
  --sk-accent: #007d50;
  --sk-on-accent: #ffffff;
  --sk-band: #ddeae5;
  --sk-on-band: #131d19;
  --sk-highlight: #c0e8dc;
  --sk-on-highlight: #003227;
  --sk-success: #146d34;
  --sk-danger: #a51f1e;
  --sk-reward: #8a5600;
  --sk-border: #818c88;
  --sk-separator: rgb(19 29 25 / 0.13);
  --sk-inverse-accent: #61d19a;
}

/*
 * Shape, type, depth and motion: Material 3 Expressive (2026-11-11,
 * docs/DESIGN.md "Material"; the iOS values of 2026-11-04 are in git). Not
 * colours, so the contrast gate ignores them. Lengths that sit near text are
 * rem, so the sk_text setting scales them.
 */
:root {
  /* Shape: Material's corner scale under the names the apps already use.
     A button is a full pill at rest and morphs to `pressed` under a finger. */
  --sk-radius-field: 4px;     /* extra-small: an outlined text field, a list's inner corners */
  --sk-radius-tag: 8px;       /* small: chips, tags */
  --sk-radius-small: 12px;    /* medium: icon tiles, menus, small cards */
  --sk-radius-control: 16px;  /* large: the FAB, a nav rail item, a stepper */
  --sk-radius-card: 20px;     /* large-increased: cards, a list's outer corners */
  --sk-radius-sheet: 28px;    /* extra-large: sheets, dialogs, hero cards */
  --sk-radius-pill: 999px;    /* full: buttons, the nav indicator, a switch */
  --sk-radius-pressed: 12px;  /* a pressed button's corners */

  /* Shapes from Material's shape library, as clip-paths with the same 72
     points, so one morphs into the other: a finished task's circle becomes a
     cookie. The cookie is also the app tile. */
  --sk-shape-circle: polygon(50.00% 0.00%, 54.36% 0.19%, 58.68% 0.76%, 62.94% 1.70%, 67.10% 3.02%, 71.13% 4.68%, 75.00% 6.70%, 78.68% 9.04%, 82.14% 11.70%, 85.36% 14.64%, 88.30% 17.86%, 90.96% 21.32%, 93.30% 25.00%, 95.32% 28.87%, 96.98% 32.90%, 98.30% 37.06%, 99.24% 41.32%, 99.81% 45.64%, 100.00% 50.00%, 99.81% 54.36%, 99.24% 58.68%, 98.30% 62.94%, 96.98% 67.10%, 95.32% 71.13%, 93.30% 75.00%, 90.96% 78.68%, 88.30% 82.14%, 85.36% 85.36%, 82.14% 88.30%, 78.68% 90.96%, 75.00% 93.30%, 71.13% 95.32%, 67.10% 96.98%, 62.94% 98.30%, 58.68% 99.24%, 54.36% 99.81%, 50.00% 100.00%, 45.64% 99.81%, 41.32% 99.24%, 37.06% 98.30%, 32.90% 96.98%, 28.87% 95.32%, 25.00% 93.30%, 21.32% 90.96%, 17.86% 88.30%, 14.64% 85.36%, 11.70% 82.14%, 9.04% 78.68%, 6.70% 75.00%, 4.68% 71.13%, 3.02% 67.10%, 1.70% 62.94%, 0.76% 58.68%, 0.19% 54.36%, 0.00% 50.00%, 0.19% 45.64%, 0.76% 41.32%, 1.70% 37.06%, 3.02% 32.90%, 4.68% 28.87%, 6.70% 25.00%, 9.04% 21.32%, 11.70% 17.86%, 14.64% 14.64%, 17.86% 11.70%, 21.32% 9.04%, 25.00% 6.70%, 28.87% 4.68%, 32.90% 3.02%, 37.06% 1.70%, 41.32% 0.76%, 45.64% 0.19%);
  --sk-shape-cookie: polygon(50.00% 0.00%, 54.28% 1.07%, 58.16% 3.71%, 61.62% 6.65%, 65.05% 8.65%, 68.97% 9.33%, 73.50% 9.30%, 78.17% 9.76%, 82.14% 11.70%, 84.73% 15.27%, 86.00% 19.79%, 86.76% 24.26%, 88.11% 28.00%, 90.67% 31.03%, 94.17% 33.93%, 97.45% 37.29%, 99.24% 41.32%, 98.93% 45.72%, 97.00% 50.00%, 94.71% 53.91%, 93.33% 57.64%, 93.35% 61.62%, 94.17% 66.07%, 94.52% 70.76%, 93.30% 75.00%, 90.24% 78.17%, 86.00% 80.21%, 81.73% 81.73%, 78.28% 83.71%, 75.74% 86.76%, 73.50% 90.70%, 70.76% 94.52%, 67.10% 96.98%, 62.71% 97.45%, 58.16% 96.29%, 53.91% 94.71%, 50.00% 94.00%, 46.09% 94.71%, 41.84% 96.29%, 37.29% 97.45%, 32.90% 96.98%, 29.24% 94.52%, 26.50% 90.70%, 24.26% 86.76%, 21.72% 83.71%, 18.27% 81.73%, 14.00% 80.21%, 9.76% 78.17%, 6.70% 75.00%, 5.48% 70.76%, 5.83% 66.07%, 6.65% 61.62%, 6.67% 57.64%, 5.29% 53.91%, 3.00% 50.00%, 1.07% 45.72%, 0.76% 41.32%, 2.55% 37.29%, 5.83% 33.93%, 9.33% 31.03%, 11.89% 28.00%, 13.24% 24.26%, 14.00% 19.79%, 15.27% 15.27%, 17.86% 11.70%, 21.83% 9.76%, 26.50% 9.30%, 31.03% 9.33%, 34.95% 8.65%, 38.38% 6.65%, 41.84% 3.71%, 45.72% 1.07%);

  /* Layout on the 4dp grid. */
  --sk-gutter: 1rem;
  --sk-row-min: 3.5rem;      /* 56: a one-line list item; controls stay 44+ */
  --sk-row-min-kid: 4.5rem;  /* 72: a list item a child taps */
  --sk-list-gap: 2px;        /* between the items of one list */
  --sk-section-gap: 1.5rem;

  /* Type: Material's scale in rem on a 16px body, under the names the apps
     already use. Headlines are regular weight; labels and titles medium (500);
     bold is for the numbers a child reads. The device's own face comes first
     where a page can name it (a Pixel's Google Sans; nothing is downloaded),
     then the system's. */
  --sk-font: "Google Sans Text", system-ui, -apple-system, Roboto, "Segoe UI Variable", "Segoe UI", "Helvetica Neue", sans-serif;
  --sk-font-display: "Google Sans Flex", "Google Sans", var(--sk-font);  /* headlines */
  --sk-font-rounded: "Google Sans Flex", "Google Sans", ui-rounded, "SF Pro Rounded", var(--sk-font);  /* a child's numbers */
  --sk-text-large-title: 2rem;      /* 32/40 headline-large */
  --sk-text-title1: 1.75rem;        /* 28/36 headline-medium */
  --sk-text-title2: 1.5rem;         /* 24/32 headline-small */
  --sk-text-title3: 1.375rem;       /* 22/28 title-large */
  --sk-text-headline: 1rem;         /* 16/24 title-medium, weight 500 */
  --sk-text-body: 1rem;             /* 16/24 body-large */
  --sk-text-callout: 1rem;          /* 16/24: inputs (16+ stops iOS zoom) */
  --sk-text-subhead: 0.875rem;      /* 14/20 body-medium, label-large */
  --sk-text-footnote: 0.8125rem;    /* 13/18: Material's body-small is 12; new readers get 13 */
  --sk-text-caption: 0.75rem;       /* 12/16 label-medium, never on a kid screen */

  /* Depth: Material's elevation levels 1 to 3. Cards and list items sit at
     level 0 and are told apart by tone alone; shadows are for what floats
     (the FAB, a menu, a dialog, a snackbar). */
  --sk-shadow-e1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --sk-shadow-e2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
  --sk-shadow-e3: 0 1px 3px rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
  --sk-scrim: rgb(0 0 0 / 0.5);

  /* State layers: the content colour laid over a control at these opacities.
     A press also sends a ripple out from the finger. */
  --sk-state-hover: 0.08;
  --sk-state-focus: 0.1;
  --sk-state-press: 0.1;
  --sk-state-drag: 0.16;

  /* Motion: transform, opacity and corner radius only. ease-out is Material's
     standard curve, for colour and small moves; decelerate brings something
     in, accelerate takes it away. The spring (standard scheme, default
     spatial: settles in about 220ms) moves things; bouncy (expressive scheme,
     fast spatial: overshoots 9%, about 350ms) is for a child's celebration
     and the shapes that morph. Under prefers-reduced-motion, cross-fade. */
  --sk-dur-fast: 200ms;      /* short4 */
  --sk-dur-base: 300ms;      /* medium2 */
  --sk-dur-sheet: 400ms;     /* medium4 */
  --sk-dur-celebrate: 600ms; /* long4 */
  --sk-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --sk-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --sk-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --sk-spring: linear(0, 0.035, 0.119, 0.226, 0.339, 0.45, 0.551, 0.64, 0.717, 0.781, 0.833, 0.874, 0.907, 0.933, 0.952, 0.967, 0.978, 0.986, 0.991, 0.995, 1);
  --sk-spring-bouncy: linear(0, 0.053, 0.182, 0.348, 0.521, 0.683, 0.821, 0.929, 1.007, 1.057, 1.085, 1.095, 1.091, 1.08, 1.065, 1.049, 1.033, 1.019, 1.009, 1.001, 0.995, 0.992, 0.991, 0.991, 0.992, 0.994, 0.995, 0.997, 1);
}

/* Light shadows are the same shape at half the weight; the scrim is Material's 32%. */
:root[data-mode="light"] {
  --sk-shadow-e1: 0 1px 2px rgb(0 0 0 / 0.14), 0 1px 3px 1px rgb(0 0 0 / 0.08);
  --sk-shadow-e2: 0 1px 2px rgb(0 0 0 / 0.14), 0 2px 6px 2px rgb(0 0 0 / 0.08);
  --sk-shadow-e3: 0 1px 3px rgb(0 0 0 / 0.14), 0 4px 8px 3px rgb(0 0 0 / 0.08);
  --sk-scrim: rgb(0 0 0 / 0.32);
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --sk-spring: var(--sk-ease-out);
    --sk-spring-bouncy: var(--sk-ease-out);
  }
}