/*
 * The theme, A, paper and ink: paper ground and ink text; forest is only what a person acts on, and sand is only money.
 * Final: Jack signed it off on 2026-09-29, after four rounds on the style board (spikes/style/).
 * Colours named by their job, a type scale of six sizes, a spacing scale and a radius set, which the pages, cx and the board read,
 * and nothing else holds. Light and dark are two value sets under the same names: light on :root, dark on [data-theme="dark"], and
 * either on any element that names it. Switching theme swaps these values and nothing else.
 * Written by theme.mjs from the brand colours (docs/BRAND.md §8.2 on release); change the derivation there, not here.
 */
/* ---- The scales: one set for light and dark ---- */
:root {
  /* Type. System faces only: the platform's UI face for Latin, PingFang SC and the platform's CJK faces for Chinese, a page's title
     included; the system monospace for code and figures. No web font is loaded. */
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", "PingFang SC", "Microsoft YaHei", monospace;
  /* Six sizes, in rem of the browser's own 16px. */
  --size-caption: 0.75rem;   /* 12px: a tag, a column head, the fine print */
  --size-small: 0.8125rem;   /* 13px: the sidebar, a step, the status line, the model card, a card's text, a table */
  --size-body: 0.9375rem;    /* 15px: the conversation; a card's name; a tab */
  --size-lead: 1.0625rem;    /* 17px: the wordmark; a heading in an answer; a section's name; a dialog's title */
  --size-title: 1.25rem;     /* 20px: a section's title; the banner's name; the month's figure */
  --size-display: 1.625rem;  /* 26px: a page's title */
  --leading-body: 1.65;
  --leading-small: 1.5;
  --leading-tight: 1.3;
  --leading-glyph: 1;        /* one glyph centred in its mark */
  --weight-regular: 400;
  --weight-strong: 600;
  /* Spacing, on a 4px step with a 2px and a 6px for tight rows. */
  --space-1: 0.125rem;  /* 2px */
  --space-2: 0.25rem;   /* 4px */
  --space-3: 0.375rem;  /* 6px */
  --space-4: 0.5rem;    /* 8px */
  --space-5: 0.75rem;   /* 12px */
  --space-6: 1rem;      /* 16px */
  --space-7: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-9: 3rem;      /* 48px */
  /* A row of a menu or a list: the model card's rows, the plugins' rows. */
  --row: 2.2rem;
  /* Radii: a tag, a control, a surface; round only for the avatar, a switch and a dot. */
  --radius-small: 4px;
  --radius: 6px;
  --radius-large: 12px;
  --radius-round: 999px;
  /* Motion: one quick settle, never a bounce. */
  --motion-quick: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---- A, paper and ink, light ---- */
:root, [data-theme="light"] {
  color-scheme: light;
  /* The page */
  --ground: #FAF7F0;           /* paper */
  --raised: #FDFCF9;           /* paper lifted 60% toward white */
  --wash: #EBE9E2;             /* ink 6% into paper */
  --hover: #EFECE5;            /* ink 4.5% into paper */
  --line: #D9D8D2;             /* ink 13% into paper */
  --edge: #818680;             /* the least ink in paper that outlines a control at 3:1 on every ground a control sits on */
  --mark: #DCDBD4;             /* ink 12% into paper: a word a step changed */
  --ink: #1B2420;              /* ink */
  --quiet: #5E635E;            /* the least ink in paper that reads 4.6:1 on every ground it sits on */
  /* Thinking: the model's own voice, upright and in full, never folded */
  --thinking: #505652;         /* the least ink in paper that reads 7:1 on the ground: read in full, so above quiet, and a step back from ink */
  /* The frame: the sidebar, and cx's corner */
  --frame: #F1EFE8;            /* ink 3.5% into paper */
  --frame-hover: #E6E5DE;      /* ink 4.5% into the frame: a row under the pointer, and the page you are on */
  --frame-line: #D9D8D2;       /* line */
  --frame-ink: #1B2420;        /* ink */
  --frame-quiet: #616661;      /* the least ink in the frame that reads 4.6:1 */
  --frame-money: #835A1C;      /* sand's hue, darkened until it reads 4.8:1 on the frame */
  --corner: #FAF7F0;           /* ground: cx sits on the page */
  /* What a person acts on: buttons, links, focus, selected text, a switch that is on */
  --act: #1E4A38;              /* forest */
  --act-ink: #FAF7F0;          /* paper */
  --act-hover: #1E3E31;        /* ink 30% into forest */
  --act-wash: #DEE1D8;         /* forest 12% into paper: selected text */
  /* A step, and work under way */
  --step: #EBE9E2;             /* wash */
  --step-edge: #EBE9E2;        /* wash: a finished step has no edge */
  --live: #5E635E;             /* quiet: work under way is said in words, not colour */
  --live-wash: #EBE9E2;        /* wash: a running step keeps the step's ground */
  --live-edge: #818680;        /* edge: the running step is the one with an outline */
  /* Money: the person's own money, and nothing else */
  --money: #865C1F;            /* sand's own hue and chroma, darkened until it reads 4.8:1 on every ground money sits on */
  --money-wash: #F1E7D7;       /* sand 16% into paper */
  --money-bar-1: #4B3D20;      /* ink 55% into money: a spending bar's foot */
  --money-bar-2: #865C1F;      /* money: a spending bar's second part */
  --money-bar-3: #A48456;      /* money 75% into raised: a spending bar's third part */
  /* Failure: what failed and may need the person to act; a warning is not one */
  --bad: #A43C33;              /* brick, oklch(0.50 0.14 28): the one new hue, for a job no brand colour carries */
  --bad-wash: #F5E8E0;         /* brick 8% into paper */
  --bad-line: #D8A398;         /* brick 45% into paper */
  /* Over the page: a menu, cx's bubble, a dialog */
  --float-edge: #BEBFB9;       /* ink 24% into paper: the outline of what lies over the page, in a shadow's place */
  --float-hover: #E4E2DB;      /* ink 4.5% into hover: a row under the pointer in a menu or a list of ticks */
  --float-shadow: none;        /* none: what lies over the page is drawn by its outline */
  --scrim: #1B24204D;          /* ink at 30%: the page under a dialog, still seen */
  /* The logo */
  --logo-forest: #1E4A38;      /* the logo (§8.2) */
  --logo-sand: #BE9257;        /* the logo (§8.2) */
  /* cx and its computer: what cx.js reads */
  --cx-line: #1B2420;          /* ink: cx's pencil */
  --cx-forest: #1E4A38;        /* the logo's forest */
  --cx-forest-shade: #1E3E31;  /* cx's forest 30% toward the darkest brand colour */
  --cx-sand: #BE9257;          /* the logo's sand */
  --cx-sand-shade: #866D46;    /* cx's sand 32% toward the darkest brand colour */
  --cx-sand-light: #EBD9A9;    /* cx's pencil wood (cx.js) */
  --cx-chalk: #F3EFE4;         /* cx's chalk (cx.js) */
  --cx-bezel: #E1DFD9;         /* ink 10% into paper */
  --cx-bezel-top: #EDEBE4;     /* ink 5% into paper */
  --cx-bezel-side: #CDCDC6;    /* ink 18% into paper */
  --cx-tube-top: #E6E4DD;      /* ink 8% into paper */
  --cx-tube-side: #C3C4BD;     /* ink 22% into paper */
  --cx-paper: #F1E7D7;         /* money-wash: the receipt cx reads is money */
  --cx-coin: #865C1F;          /* money: the coin cx's screen shows when the balance is too low */
  --cx-screen-off: #1B2420;    /* ink: the screen dark */
  --cx-screen-on: #FDFCF9;     /* raised: the screen lit */
  --cx-good: #1E4A38;          /* act: the computer is a control */
  --cx-warn: #688373;          /* forest toward the ground: the light while the computer comes on */
  --cx-quiet: #5E635E;         /* quiet */
  --cx-accent: #1B2420;        /* ink: the marks on cx's screen */
  --cx-bad: #A43C33;           /* bad: a refusal's cross */
}

/* ---- A, paper and ink, dark ---- */
[data-theme="dark"] {
  color-scheme: dark;
  /* The page */
  --ground: #1B2420;           /* ink: the dark ground starts at the brand's ink, not at black */
  --raised: #232B27;           /* light ink 4.5% into ink */
  --wash: #28302C;             /* light ink 7.5% into ink */
  --hover: #252E29;            /* light ink 6% into ink */
  --line: #363D38;             /* light ink 15% into ink */
  --edge: #757971;             /* the least light ink in ink that outlines a control at 3:1 on every ground a control sits on */
  --mark: #3A413B;             /* light ink 17% into ink: a word a step changed */
  --ink: #EDE8DC;              /* the logo's ink on a dark ground (§8.2) */
  --quiet: #A1A298;            /* the least light ink in ink that reads 4.6:1 on every ground it sits on */
  /* Thinking: the model's own voice, upright and in full, never folded */
  --thinking: #ADADA3;         /* the least light ink in ink that reads 7:1 on the ground: read in full, so above quiet, and a step back from ink */
  /* The frame: the sidebar, and cx's corner */
  --frame: #171E1A;            /* ink 30% toward the logo's dark ground, still near ink */
  --frame-hover: #212824;      /* light ink 6% into the frame: a row under the pointer, and the page you are on */
  --frame-line: #363D38;       /* line */
  --frame-ink: #EDE8DC;        /* light ink */
  --frame-quiet: #8E8F86;      /* the least light ink in the frame that reads 4.6:1 */
  --frame-money: #D8B183;      /* the logo's sand on a dark ground (§8.2) */
  --corner: #1B2420;           /* ground: cx sits on the page */
  /* What a person acts on: buttons, links, focus, selected text, a switch that is on */
  --act: #6CAA8C;              /* the logo's dark-ground forest, lightened until it reads 5:1 on the ground, raised, wash and hover */
  --act-ink: #1B2420;          /* ink */
  --act-hover: #8DBA9F;        /* light ink 25% into act */
  --act-wash: #273B32;         /* the dark-ground forest 24% into ink: selected text */
  /* A step, and work under way */
  --step: #28302C;             /* wash */
  --step-edge: #28302C;        /* wash: a finished step has no edge */
  --live: #A1A298;             /* quiet: work under way is said in words, not colour */
  --live-wash: #28302C;        /* wash: a running step keeps the step's ground */
  --live-edge: #757971;        /* edge: the running step is the one with an outline */
  /* Money: the person's own money, and nothing else */
  --money: #D8B183;            /* the logo's sand on a dark ground (§8.2) */
  --money-wash: #32362D;       /* the dark-ground sand 14% into ink */
  --money-bar-1: #E4CFB4;      /* ink 55% into money: a spending bar's foot */
  --money-bar-2: #B0946F;      /* money 78% into raised: a spending bar's second part */
  --money-bar-3: #87755A;      /* money 55% into raised: a spending bar's third part */
  /* Failure: what failed and may need the person to act; a warning is not one */
  --bad: #E6867A;              /* brick, oklch(0.72 0.12 28): the one new hue, for a job no brand colour carries */
  --bad-wash: #312F2A;         /* brick 12% into ink */
  --bad-line: #714F46;         /* brick 45% into ink */
  /* Over the page: a menu, cx's bubble, a dialog */
  --float-edge: #4B514B;       /* light ink 26% into ink: the outline of what lies over the page, in a shadow's place */
  --float-hover: #2F3832;      /* light ink 6% into hover: a row under the pointer in a menu or a list of ticks */
  --float-shadow: none;        /* none: what lies over the page is drawn by its outline */
  --scrim: #0E110E99;          /* the logo's dark ground at 60%: the page under a dialog, still seen */
  /* The logo */
  --logo-forest: #4E8B6F;      /* the logo on a dark ground (§8.2) */
  --logo-sand: #D8B183;        /* the logo on a dark ground (§8.2) */
  /* cx and its computer: what cx.js reads */
  --cx-line: #EDE8DC;          /* light ink: cx's pencil */
  --cx-forest: #4E8B6F;        /* the logo's forest on a dark ground (§8.2) */
  --cx-forest-shade: #3A634F;  /* cx's forest 30% toward the darkest brand colour */
  --cx-sand: #D8B183;          /* the logo's sand on a dark ground (§8.2) */
  --cx-sand-shade: #90785A;    /* cx's sand 32% toward the darkest brand colour */
  --cx-sand-light: #EBD9A9;    /* cx's pencil wood (cx.js) */
  --cx-chalk: #F3EFE4;         /* cx's chalk (cx.js) */
  --cx-bezel: #383F3A;         /* light ink 16% into ink */
  --cx-bezel-top: #474D47;     /* light ink 24% into ink */
  --cx-bezel-side: #2D3530;    /* light ink 10% into ink */
  --cx-tube-top: #3F4641;      /* light ink 20% into ink */
  --cx-tube-side: #27302B;     /* light ink 7% into ink */
  --cx-paper: #32362D;         /* money-wash: the receipt cx reads is money */
  --cx-coin: #D8B183;          /* money: the coin cx's screen shows when the balance is too low */
  --cx-screen-off: #0E110E;    /* the logo's dark ground: the screen dark */
  --cx-screen-on: #4F554F;     /* light ink 28% into ink: the screen lit */
  --cx-good: #6CAA8C;          /* act: the computer is a control */
  --cx-warn: #3C6552;          /* forest toward the ground: the light while the computer comes on */
  --cx-quiet: #A1A298;         /* quiet */
  --cx-accent: #EDE8DC;        /* light ink: the marks on cx's screen */
  --cx-bad: #E6867A;           /* bad: a refusal's cross */
}