/* ==========================================================================
   Cyber City · design tokens v0.4 · 2026-10-02
   GENERATED from tokens.json by build-tokens.mjs. Do not edit this file: change tokens.json, then run
   `node build-tokens.mjs`.
   Single source of names for the identity system and the `ecc` theme.
   Day   = direction B (aluminium canvas, studio-white tiles, dark feature panels, lime ink on light).
   Night = direction A's luxury (void, wall, plinth, light pools, lime current lines).
   Lime #A2EA0A is the only accent ("a spark, not a floodlight"). On light surfaces lime text/lines use --ecc-spark.
   Day is the default theme: it applies with no data-theme attribute and with <html data-theme="day">.
   Night applies only with <html data-theme="night">, which the visitor's switch sets (the pixel kit stores the choice
   under "ecc-theme"). The dark mode of the device never picks the theme: no rule here reads the device's colour scheme.
   v0.4 keeps every earlier name, and every earlier value but two sets changed on purpose. Since v0.3 the three font stacks (f-text, f-mono,
   f-dot) carry the metric fallback families that fonts.css defines (their first family and their system tail are unchanged). Since v0.4 the
   Day tile button (btn-tile-bg, -fg, -line, -hover) is an outline: it was a copy of the primary button.
   Added in v0.2: text on chrome, status colours, the tile button, states (field well, washes, selected, disabled), the focus ring recipe,
   the product stage light recipes, elevation rules, type weights and widths, and the dark panel context (.ecc-ctx-panel).
   Added in v0.3 (one token source): the names the motion layer, the motifs and the icon sprite used on their own. Motion: rise, standby,
   stagger-voxel, budget, ticker-loop, press, loader-loop, shimmer-loop. Colour: screen (the LED screen). Hooks with a default: trace, line-case,
   floor, icon-spark, icon-fill. No other file declares an --ecc-* name at :root any more.
   Added in v0.4 (after the design review of 2 Oct): the logo's two materials as tokens (chrome-gradient, lime-mark), the text selection
   colours (selection-bg, selection-fg), and a block for visitors who ask for more contrast. Removed: the block that gave Night to a device
   in dark mode.
   ========================================================================== */

/* Day: the default. No attribute, or data-theme="day". */
:root,
:root[data-theme="day"] {
  color-scheme: light;
  /* surfaces */
  --ecc-canvas: #E6E7E4;         /* page */
  --ecc-surface: #F7F7F5;        /* tiles, cards */
  --ecc-surface-2: #ECEDEA;      /* quiet raised/alt surface */
  --ecc-chrome: #C8C8C8;         /* the logo's chrome, used as a tile or rule; text on it is --ecc-on-chrome */
  --ecc-panel: #0B0D0C;          /* dark feature panels (hero, departments): stay dark in Day */
  --ecc-panel-2: #2E3230;        /* graphite panel */
  --ecc-surface-border: transparent;
  --ecc-panel-border: transparent;
  /* text */
  --ecc-ink: #0B0D0C;            /* 15.70:1 on canvas */
  --ecc-ink-2: #474D49;          /* 6.97:1 on canvas */
  --ecc-on-panel: #EEEFEC;       /* 16.89:1 on panel */
  --ecc-on-panel-2: #A3A9A5;     /* 8.14:1 on panel */
  /* lines */
  --ecc-line: rgba(11, 13, 12, .12);
  --ecc-line-strong: rgba(11, 13, 12, .28);
  --ecc-control-line: #474D49;   /* control borders, >= 3:1 (8.07:1 on surface) */
  /* accent */
  --ecc-lime: #A2EA0A;           /* fills and pips; text on it is --ecc-on-lime */
  --ecc-on-lime: #0B0D0C;
  --ecc-lime-hover: #B9F53A;
  --ecc-spark: #4A7900;          /* lime as text, lines and dots on light (4.86:1 on surface; on canvas 4.20:1: lines and dots only) */
  --ecc-focus: #0B0D0C;
  /* primary button in this theme */
  --ecc-btn-bg: #0B0D0C;
  --ecc-btn-fg: #EEEFEC;
  --ecc-btn-pip: #A2EA0A;
  --ecc-btn-hover: #2E3230;
  /* product stage light */
  --ecc-case-light: #EADBC4;     /* warm light sampled from the store's oak camera case; light only, never text */
  /* chrome is the same light grey in both themes, so its text colours do not flip · added in v0.2 */
  --ecc-on-chrome: #0B0D0C;      /* 11.65:1 on chrome */
  --ecc-on-chrome-2: #474D49;    /* 5.17:1 on chrome */
  /* status colours are for feedback only (alerts, validation), never decoration. -fg = text and icons, -bg = quiet tint, -line = border.
     success comes from the lime / lime-ink family; warning from the case-light hue; danger is a warm red; info a steel blue (no purple) · added in v0.2 */
  --ecc-success-fg: #3E6500;     /* 5.99:1 on its tint, 5.51:1 on canvas */
  --ecc-success-bg: #E5F5D9;
  --ecc-success-line: #4A7900;   /* 4.56:1 on its tint */
  --ecc-warning-fg: #754E00;     /* 6.34:1 on its tint */
  --ecc-warning-bg: #FFEBD2;
  --ecc-warning-line: #986600;   /* 4.26:1 on its tint */
  --ecc-danger-fg: #A21B18;      /* 6.65:1 on its tint */
  --ecc-danger-bg: #FEE9E6;
  --ecc-danger-line: #C5372F;    /* 4.54:1 on its tint */
  --ecc-info-fg: #245F7B;        /* 6.06:1 on its tint */
  --ecc-info-bg: #E2F1FA;
  --ecc-info-line: #3B7A98;      /* 4.11:1 on its tint */
  --ecc-danger-solid: #A21B18;   /* destructive button fill */
  --ecc-danger-solid-hover: #86100F;
  --ecc-on-danger: #FFFFFF;      /* 7.75:1 on the fill */
  /* action inside a product tile or a repeated row (.ecc-btn--tile): an outline in both themes, with a --ecc-spark pip. A grid of products
     then shows no row of filled buttons: one filled button per view, the page's primary. Day changed in v0.4 (it was a copy of the primary) · added in v0.2 */
  --ecc-btn-tile-bg: transparent; /* the tile shows through */
  --ecc-btn-tile-fg: #0B0D0C;
  --ecc-btn-tile-line: #0B0D0C;  /* an ink line: one step stronger than the secondary button's border */
  --ecc-btn-tile-hover: rgba(11, 13, 12, .07); /* hover and pressed: the wash */
  /* states · added in v0.2 */
  --ecc-field-bg: #FFFFFF;       /* inputs and chips are wells: white by day (direction B) */
  --ecc-wash: rgba(11, 13, 12, .07); /* hover wash on quiet controls */
  --ecc-wash-strong: rgba(11, 13, 12, .12); /* pressed wash */
  --ecc-selected-bg: #0B0D0C;    /* selected chip and page number: ink fill with a lime pip */
  --ecc-selected-fg: #EEEFEC;
  --ecc-selected-line: #0B0D0C;
  --ecc-disabled-bg: #D5D7D3;
  --ecc-disabled-fg: #6A706C;    /* 3.49:1 (inactive controls are exempt from the contrast rule) */
  --ecc-disabled-line: transparent;
  /* focus ring recipe: outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset). Fields add box-shadow: var(--ecc-focus-halo) · added in v0.2 */
  --ecc-focus-ring: 2px solid #0B0D0C;
  --ecc-focus-halo: 0 0 0 3px rgba(74, 121, 0, .35); /* soft glow added on fields; the ring is the indicator */
  /* text selection (::selection in foundations.css): the inverse of the text around it, so a selected range reads in both themes and,
     with the Night values, inside dark panels. Never lime: a selection can cover a whole page · added in v0.4 */
  --ecc-selection-bg: #0B0D0C;   /* 15.70:1 against the page */
  --ecc-selection-fg: #EEEFEC;   /* 16.89:1 on the selection */
  /* product stage: which light recipe is on in this theme (the recipes themselves are below, in :root) · added in v0.2 */
  --ecc-stage-day: 1;            /* opacity of the Day layers (studio light, floor shadow) */
  --ecc-stage-night: 0;          /* opacity of the Night layers (light pool, floor line, lime current) */
  --ecc-stage-bg: var(--ecc-stage-studio);
  --ecc-stage-floor: var(--ecc-stage-floor-shadow);
  --ecc-stage-img-filter: var(--ecc-stage-shadow); /* soft floor shadow under the cut-out */
  --ecc-lime-edge: inset 0 0 0 1px rgba(74, 121, 0, .95); /* keeps a lime voxel readable on light: a lime-ink hairline */
  /* elevation: no drop shadows in either theme. Day is flat modules (the 8px gap separates them). Night uses borders and light.
     Use as box-shadow · added in v0.2 */
  --ecc-elev-module: inset 0 0 0 1px transparent; /* flat */
  --ecc-elev-raised: inset 0 0 0 1px rgba(11, 13, 12, .28); /* hover or active module: a stronger line */
  --ecc-elev-overlay: 0 0 0 1px rgba(11, 13, 12, .28); /* drawer, toast, tooltip: a hairline */
  --ecc-scrim: rgba(11, 13, 12, .5); /* behind a drawer or dialog */
  /* LED screen (.ecc-led, .ecc-mark--led in motifs.css): dark in both themes, a little darker than the panel around it. Text on it is --ecc-on-panel · added in v0.3 */
  --ecc-screen: #050606;         /* 17.57:1 under --ecc-on-panel */
  /* hooks of the graphic motifs: set one on an element to change that instance; these are the defaults.
     They are aliases, so they follow the theme and the dark panel context · added in v0.3 */
  --ecc-trace: var(--ecc-control-line); /* pads, vias, rules and trace lines (motifs.css, motion.css) */
  --ecc-line-case: var(--ecc-surface); /* the casing under an answer line: the surface the line runs over (motion.css) */
}

/* Night: only when the visitor chose it. */
:root[data-theme="night"] {
  color-scheme: dark;
  /* surfaces */
  --ecc-canvas: #0A0C0B;         /* void */
  --ecc-surface: #111412;        /* wall */
  --ecc-surface-2: #181C1A;      /* plinth */
  --ecc-chrome: #C8C8C8;         /* a line and icon colour at night; as a tile its text is --ecc-on-chrome */
  --ecc-panel: #111412;
  --ecc-panel-2: #181C1A;
  --ecc-surface-border: #2E3230;
  --ecc-panel-border: #2E3230;
  /* text */
  --ecc-ink: #EDEFEE;            /* 16.98:1 on void */
  --ecc-ink-2: #C8C8C8;          /* 11.08:1 on wall */
  --ecc-on-panel: #EDEFEE;       /* 16.05:1 on panel */
  --ecc-on-panel-2: #A3A9A5;     /* 7.74:1 on wall */
  /* lines */
  --ecc-line: rgba(237, 239, 238, .10);
  --ecc-line-strong: #2E3230;
  --ecc-control-line: #8F9692;   /* control borders, >= 3:1 (6.13:1 on surface) */
  /* accent */
  --ecc-lime: #A2EA0A;
  --ecc-on-lime: #0A0C0B;
  --ecc-lime-hover: #B9F53A;
  --ecc-spark: #A2EA0A;
  --ecc-focus: #A2EA0A;
  /* primary button in this theme */
  --ecc-btn-bg: #A2EA0A;
  --ecc-btn-fg: #0A0C0B;
  --ecc-btn-pip: #0A0C0B;
  --ecc-btn-hover: #B9F53A;
  /* product stage light */
  --ecc-case-light: #EADBC4;
  /* chrome is the same light grey in both themes, so its text colours do not flip · added in v0.2 */
  --ecc-on-chrome: #0B0D0C;      /* 11.65:1 on chrome */
  --ecc-on-chrome-2: #474D49;    /* 5.17:1 on chrome */
  /* status colours are for feedback only (alerts, validation), never decoration. -fg = text and icons, -bg = quiet tint, -line = border.
     success comes from the lime / lime-ink family; warning from the case-light hue; danger is a warm red; info a steel blue (no purple) · added in v0.2 */
  --ecc-success-fg: #A2EA0A;     /* 11.76:1 on its tint */
  --ecc-success-bg: #161D0F;
  --ecc-success-line: #619128;   /* 4.59:1 on its tint */
  --ecc-warning-fg: #F3BD5C;     /* 10.07:1 on its tint */
  --ecc-warning-bg: #23190A;
  --ecc-warning-line: #A27825;   /* 4.32:1 on its tint */
  --ecc-danger-fg: #FF8A7A;      /* 7.62:1 on its tint */
  --ecc-danger-bg: #271513;
  --ecc-danger-line: #CE5247;    /* 4.09:1 on its tint */
  --ecc-info-fg: #88C7E9;        /* 9.35:1 on its tint */
  --ecc-info-bg: #0B1D26;
  --ecc-info-line: #4A89A8;      /* 4.46:1 on its tint */
  --ecc-danger-solid: #FF8A7A;   /* destructive button fill */
  --ecc-danger-solid-hover: #FEA194;
  --ecc-on-danger: #0A0C0B;      /* 8.56:1 on the fill */
  /* action inside a product tile or a repeated row (.ecc-btn--tile): an outline in both themes, with a --ecc-spark pip. A grid of products
     then shows no row of filled buttons: one filled button per view, the page's primary. Day changed in v0.4 (it was a copy of the primary) · added in v0.2 */
  --ecc-btn-tile-bg: transparent; /* the tile shows through */
  --ecc-btn-tile-fg: #EDEFEE;
  --ecc-btn-tile-line: #8F9692;  /* the control line */
  --ecc-btn-tile-hover: rgba(237, 239, 238, .08); /* hover and pressed: the wash */
  /* states · added in v0.2 */
  --ecc-field-bg: #0A0C0B;       /* the void by night (direction A) */
  --ecc-wash: rgba(237, 239, 238, .08); /* hover wash on quiet controls */
  --ecc-wash-strong: rgba(237, 239, 238, .14); /* pressed wash */
  --ecc-selected-bg: rgba(162, 234, 10, .08); /* selected: a lime line and a faint lime tint, so lime stays a spark */
  --ecc-selected-fg: #EDEFEE;
  --ecc-selected-line: #A2EA0A;
  --ecc-disabled-bg: #181C1A;
  --ecc-disabled-fg: #8F9692;    /* 5.69:1 (inactive controls are exempt from the contrast rule) */
  --ecc-disabled-line: #2E3230;
  /* focus ring recipe: outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset). Fields add box-shadow: var(--ecc-focus-halo) · added in v0.2 */
  --ecc-focus-ring: 2px solid #A2EA0A;
  --ecc-focus-halo: 0 0 0 3px rgba(162, 234, 10, .28); /* soft glow added on fields; the ring is the indicator */
  /* text selection (::selection in foundations.css): the inverse of the text around it, so a selected range reads in both themes and,
     with the Night values, inside dark panels. Never lime: a selection can cover a whole page · added in v0.4 */
  --ecc-selection-bg: #EDEFEE;   /* 16.98:1 against the page */
  --ecc-selection-fg: #0A0C0B;   /* 16.98:1 on the selection */
  /* product stage: which light recipe is on in this theme (the recipes themselves are below, in :root) · added in v0.2 */
  --ecc-stage-day: 0;            /* opacity of the Day layers (studio light, floor shadow) */
  --ecc-stage-night: 1;          /* opacity of the Night layers (light pool, floor line, lime current) */
  --ecc-stage-bg: var(--ecc-stage-pool);
  --ecc-stage-floor: var(--ecc-stage-floor-pool);
  --ecc-stage-img-filter: var(--ecc-stage-rim); /* rim light, so dark products read on dark */
  --ecc-lime-edge: 0 0 6px rgba(162, 234, 10, .55); /* a soft lime glow */
  /* elevation: no drop shadows in either theme. Day is flat modules (the 8px gap separates them). Night uses borders and light.
     Use as box-shadow · added in v0.2 */
  --ecc-elev-module: inset 0 0 0 1px #2E3230; /* a graphite border */
  --ecc-elev-raised: inset 0 0 0 1px #5F6662; /* hover or active module: a stronger line */
  --ecc-elev-overlay: 0 0 0 1px #2E3230, inset 0 1px 0 rgba(237, 239, 238, .08); /* a border and a light edge on top */
  --ecc-scrim: rgba(10, 12, 11, .72); /* behind a drawer or dialog */
  /* LED screen (.ecc-led, .ecc-mark--led in motifs.css): dark in both themes, a little darker than the panel around it. Text on it is --ecc-on-panel · added in v0.3 */
  --ecc-screen: #050606;         /* 17.56:1 under --ecc-on-panel */
  /* hooks of the graphic motifs: set one on an element to change that instance; these are the defaults.
     They are aliases, so they follow the theme and the dark panel context · added in v0.3 */
  --ecc-trace: var(--ecc-control-line); /* pads, vias, rules and trace lines (motifs.css, motion.css) */
  --ecc-line-case: var(--ecc-surface); /* the casing under an answer line: the surface the line runs over (motion.css) */
}

:root {
  /* type families. Since v0.3 each stack carries the metric fallback families of fonts.css (system fonts resized to our metrics,
     so the swap from fallback to web font moves nothing). tools/build-fonts.py checks that the names here match the faces it writes */
  --ecc-f-text: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ecc-f-mono: "Martian Mono", "Martian Mono Fallback", "Martian Mono Fallback Courier", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ecc-f-dot: "Doto", "Doto Fallback", "Doto Fallback Courier", ui-monospace, monospace; /* readouts and numerals only, never under 20px, and never under 24px on a light surface */
  /* type scale (fluid between 390 and 1536) */
  --ecc-t-display-xl: clamp(2.75rem, 1.6rem + 4.7vw, 4.5rem); /* 44 -> 72 */
  --ecc-t-display: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem); /* 36 -> 56 */
  --ecc-t-h1: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem); /* 30 -> 40 */
  --ecc-t-h2: clamp(1.5rem, 1.38rem + .5vw, 1.75rem); /* 24 -> 28 */
  --ecc-t-h3: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); /* 20 -> 22 */
  --ecc-t-body-lg: 1.125rem;     /* 18 */
  --ecc-t-body: 1rem;            /* 16, the floor for running text */
  --ecc-t-small: .875rem;        /* 14, never for running text */
  --ecc-t-label: .8125rem;       /* 13, mono uppercase */
  --ecc-t-micro: .75rem;         /* 12, the absolute floor */
  --ecc-lh-display: 1;
  --ecc-lh-heading: 1.15;
  --ecc-lh-body: 1.55;
  --ecc-ls-display: -.03em;
  --ecc-ls-heading: -.015em;
  --ecc-ls-label: .04em;
  /* type weights and widths (variable axes, from direction B and the pixel kit) · added in v0.2 */
  --ecc-fw-text: 400;
  --ecc-fw-medium: 560;          /* chips, facts, emphasis */
  --ecc-fw-strong: 620;          /* buttons, h2, h3, product names */
  --ecc-fw-display: 640;         /* h1 and display */
  --ecc-fw-mono: 500;            /* mono labels */
  --ecc-fw-dot: 800;             /* Doto readouts */
  --ecc-wdth-text: 100%;
  --ecc-wdth-heading: 104%;      /* h3, product names */
  --ecc-wdth-title: 108%;        /* h2 */
  --ecc-wdth-display: 110%;      /* h1 and display */
  --ecc-wdth-mono: 87.5%;        /* mono labels */
  --ecc-dot-settings: "ROND" 100; /* kept for the CSS that names it, and it changes nothing: the built Doto has no ROND axis. The shape of the pixels is one constant, DOTO_ROND in tools/build-fonts.py (see fonts.css) */
  /* space (4px base) */
  --ecc-s-1: 4px;
  --ecc-s-2: 8px;
  --ecc-s-3: 12px;
  --ecc-s-4: 16px;
  --ecc-s-5: 24px;
  --ecc-s-6: 32px;
  --ecc-s-7: 48px;
  --ecc-s-8: 64px;
  --ecc-s-9: 96px;
  --ecc-gap: 8px;                /* the module gap of the grid */
  --ecc-gutter: clamp(16px, 3vw, 48px);
  --ecc-container: 1536px;
  /* shape */
  --ecc-r: 8px;
  --ecc-r-sm: 6px;
  --ecc-r-voxel: 2px;
  --ecc-hit: 44px;               /* minimum tap target */
  /* focus ring geometry · added in v0.2 */
  --ecc-focus-width: 2px;
  --ecc-focus-offset: 3px;
  /* motion */
  --ecc-d-press: 90ms;
  --ecc-d-fast: 160ms;
  --ecc-d-base: 240ms;
  --ecc-d-slow: 420ms;
  --ecc-d-boot: 700ms;
  --ecc-stagger: 60ms;
  --ecc-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ecc-ease-current: cubic-bezier(.65, 0, .35, 1);
  --ecc-ease-pixel: steps(4, end);
  /* layers */
  --ecc-z-raised: 10;
  --ecc-z-sticky: 100;
  --ecc-z-overlay: 1000;
  --ecc-z-modal: 1100;
  --ecc-z-toast: 1200;
  --ecc-z-cursor: 2000;
  --ecc-z-loader: 3000;
  /* product stage light recipes (from pixel-kit.css; the same in both themes, the theme picks one) · added in v0.2 */
  --ecc-stage-studio: radial-gradient(ellipse 70% 55% at 50% 42%, #FFFFFF 0%, #F4F5F2 45%, #DFE1DD 100%); /* Day: one soft studio light from above */
  --ecc-stage-floor-shadow: radial-gradient(closest-side, rgba(11, 13, 12, .18), rgba(11, 13, 12, 0)); /* Day: soft shadow on the floor */
  --ecc-stage-shadow: drop-shadow(0 0 0 rgba(237, 239, 238, 0)) drop-shadow(0 16px 18px rgba(11, 13, 12, .20)) brightness(1) contrast(1); /* Day: filter on the cut-out (same shape as the rim filter, so the two crossfade) */
  --ecc-stage-pool: radial-gradient(62% 58% at 50% 46%, rgba(234, 219, 196, .17), rgba(234, 219, 196, .05) 58%, transparent 82%), #181C1A; /* Night: a pool of warm case light on the plinth */
  --ecc-stage-floor-pool: radial-gradient(closest-side, rgba(234, 219, 196, .2), rgba(234, 219, 196, .06) 55%, transparent); /* Night: the light pool on the floor */
  --ecc-stage-hairline: linear-gradient(90deg, transparent, #2E3230 12%, #2E3230 88%, transparent); /* Night: the floor line */
  --ecc-stage-rim: drop-shadow(0 0 .7px rgba(237, 239, 238, .55)) drop-shadow(0 -10px 26px rgba(234, 219, 196, .14)) brightness(1.08) contrast(1.04); /* Night: rim light on the cut-out */
  --ecc-stage-current: linear-gradient(90deg, transparent, #A2EA0A 30%, #A2EA0A 70%, transparent); /* Night: the lime current on the floor line (runs once per product) */
  --ecc-stage-current-glow: 0 0 10px rgba(162, 234, 10, .5);
  /* elevation · added in v0.2 */
  --ecc-elev-flat: none;
  /* motion: sequence values (the motion layer, motion.md) · added in v0.3 */
  --ecc-rise: 6px;               /* the one travel distance: modules, lines of text, answers */
  --ecc-standby: .3;             /* a first-screen module before it is on: dim, never invisible */
  --ecc-stagger-voxel: calc(var(--ecc-stagger) / 2); /* 30ms between voxels */
  --ecc-budget: 1200ms;          /* one screen sequence, first frame to rest */
  --ecc-ticker-loop: 46s;        /* about 38 px a second: readable, never racing */
  --ecc-press: 1px;              /* how far a control moves down while it is held, in --ecc-d-press */
  --ecc-loader-loop: 1050ms;     /* the busy button: three voxels light in turn, 350ms each (foundations.css) */
  --ecc-shimmer-loop: 2600ms;    /* the skeleton: one pass of the voxel band (foundations.css) */
  /* hooks: set one on an element to change that instance; these are the defaults · added in v0.3 */
  --ecc-floor: 15%;              /* where the floor of a product stage sits, measured from its bottom edge (motifs.css) */
  --ecc-icon-spark: currentColor; /* the spark square of a department icon: set it to var(--ecc-spark) to light it (icons.md) */
  --ecc-icon-fill: none;         /* the inside of a heart or a star: set it to currentColor when it is on */
  /* the logo's two materials, the same in both themes.
     chrome-gradient: the logo's chrome, top to bottom. Use it as the background of clipped text (background-clip: text, color: transparent)
     or of a graphic. Display sizes only, dark panels only, one phrase per screen.
     lime-mark: the lime of the logo files made for light surfaces (cc-*-flat-light.svg). Graphics only, never text · added in v0.4 */
  --ecc-chrome-gradient: linear-gradient(180deg, #F4F5F4 0%, #C9CBCA 40%, #9A9D9B 62%, #D6D8D7 80%, #AEB1AF 100%); /* large text and graphics on a dark panel; its darkest stop is the one measured in contrast-report.md */
  --ecc-lime-mark: #669800;      /* a large graphic needs 3:1: 3.23:1 on a tile, 3.46:1 on white, but 2.79:1 on the Day canvas, so the mark sits on a tile or on white. It is not --ecc-spark (#4A7900): that one is darker because it carries text and thin lines (4.5:1) */
}

/* Dark feature panels (--ecc-panel, --ecc-panel-2) stay dark in Day. Put .ecc-ctx-panel on the panel and every token-driven
   child reads correctly: inks become the on-panel inks, and controls take their Night values (the primary button is lime). Added in v0.2. */
.ecc-ctx-panel {
  color-scheme: dark;
  --ecc-ink: var(--ecc-on-panel);
  --ecc-ink-2: var(--ecc-on-panel-2);
  --ecc-canvas: var(--ecc-panel);
  --ecc-surface: var(--ecc-panel-2);
  --ecc-surface-2: var(--ecc-panel-2);
  --ecc-surface-border: var(--ecc-panel-border);
  --ecc-line: rgba(238, 239, 236, .12);
  --ecc-line-strong: rgba(238, 239, 236, .28);
  --ecc-btn-fg: var(--ecc-on-lime);
  --ecc-btn-pip: var(--ecc-on-lime);
  --ecc-on-danger: var(--ecc-on-lime);
  --ecc-elev-module: inset 0 0 0 1px var(--ecc-panel-border);
  --ecc-trace: var(--ecc-control-line);
  --ecc-line-case: var(--ecc-surface);
  /* the Night values */
  --ecc-control-line: #8F9692;
  --ecc-spark: #A2EA0A;
  --ecc-focus: #A2EA0A;
  --ecc-btn-bg: #A2EA0A;
  --ecc-btn-hover: #B9F53A;
  --ecc-success-fg: #A2EA0A;
  --ecc-success-bg: #161D0F;
  --ecc-success-line: #619128;
  --ecc-warning-fg: #F3BD5C;
  --ecc-warning-bg: #23190A;
  --ecc-warning-line: #A27825;
  --ecc-danger-fg: #FF8A7A;
  --ecc-danger-bg: #271513;
  --ecc-danger-line: #CE5247;
  --ecc-info-fg: #88C7E9;
  --ecc-info-bg: #0B1D26;
  --ecc-info-line: #4A89A8;
  --ecc-danger-solid: #FF8A7A;
  --ecc-danger-solid-hover: #FEA194;
  --ecc-btn-tile-bg: transparent;
  --ecc-btn-tile-fg: #EDEFEE;
  --ecc-btn-tile-line: #8F9692;
  --ecc-btn-tile-hover: rgba(237, 239, 238, .08);
  --ecc-field-bg: #0A0C0B;
  --ecc-wash: rgba(237, 239, 238, .08);
  --ecc-wash-strong: rgba(237, 239, 238, .14);
  --ecc-selected-bg: rgba(162, 234, 10, .08);
  --ecc-selected-fg: #EDEFEE;
  --ecc-selected-line: #A2EA0A;
  --ecc-disabled-bg: #181C1A;
  --ecc-disabled-fg: #8F9692;
  --ecc-disabled-line: #2E3230;
  --ecc-focus-ring: 2px solid #A2EA0A;
  --ecc-focus-halo: 0 0 0 3px rgba(162, 234, 10, .28);
  --ecc-selection-bg: #EDEFEE;
  --ecc-selection-fg: #0A0C0B;
  --ecc-lime-edge: 0 0 6px rgba(162, 234, 10, .55);
  --ecc-elev-raised: inset 0 0 0 1px #5F6662;
  --ecc-elev-overlay: 0 0 0 1px #2E3230, inset 0 1px 0 rgba(237, 239, 238, .08);
}

/* The visitor asked the device for more contrast. Hairlines and module edges become solid lines, the translucent focus halo becomes
   solid, muted text on dark panels becomes the panel ink, and disabled text is raised to the secondary ink. Every value is an alias, so it
   follows the theme and the dark panel context. Added in v0.4. */
@media (prefers-contrast: more) {
  :root,
  :root[data-theme="day"],
  :root[data-theme="night"],
  .ecc-ctx-panel {
    --ecc-line: var(--ecc-ink);
    --ecc-line-strong: var(--ecc-ink);
    --ecc-elev-module: inset 0 0 0 1px var(--ecc-control-line);
    --ecc-focus-halo: 0 0 0 3px var(--ecc-spark);
    --ecc-on-panel-2: var(--ecc-on-panel);
    --ecc-disabled-fg: var(--ecc-ink-2);
  }
}