/*
 * THE ONE PLACE for colour, type, spacing and corners on www.showcomposer.org.
 * Decided 2026-10-19: the light variant of the product family (mock-up B). The product's own
 * charcoal stays for the header and footer so the approved lockup (baked black background) is
 * never recoloured; the page surface is an off-white with a lavender bias; the semantic colours
 * are darkened so they pass contrast on white. Source values: product/style-guide-notes.md.
 * A later restyle (Codex) changes THIS file; pages and components carry no colour literals.
 */
:root {
  /* Surfaces */
  --color-panel: #121316;      /* header, footer: the product's charcoal */
  --color-panel-line: #303139; /* dividers on charcoal */
  --color-canvas: #f6f5fa;     /* the page */
  --color-raised: #ffffff;     /* cards, alternating bands */
  --color-line: #dedcea;       /* quiet dividers on light */
  --color-control: #9a98ad;    /* an outline where a control must be found */

  /* Text on light */
  --color-ink: #1b1b22;
  --color-muted: #5b5c6b;
  --color-faint: #8c8d9c;

  /* Text on charcoal */
  --color-on-panel: #a2a5b2;
  --color-on-panel-strong: #ededf2;

  /* Brand and semantics (meaning is the product's: mint = take, rose = live, amber = attention) */
  --color-brand: #a99cf5;      /* the SC mark's lavender; rules and accents on light */
  --color-brand-ink: #5d4fd3;  /* lavender as readable text on light */
  --color-take: #8ce3bf;       /* the primary button fill */
  --color-on-take: #10291e;    /* text on a mint button */
  --color-take-ink: #137a53;   /* mint as readable text on light */
  --color-live: #c8354f;       /* rose as readable text on light */
  --color-master: #9a6f10;     /* amber as readable text on light */
  --color-take-bg: #e2f6ec;
  --color-live-bg: #fbe3e8;
  --color-selected-bg: #efecfb;
  --color-amber-bg: #fbf4e3;

  /* Type: the product's stack, no web fonts (Segoe UI on Windows, the system face elsewhere) */
  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-mono: Consolas, "SFMono-Regular", Menlo, Monaco, "Liberation Mono", monospace;

  /* Geometry (the style guide's scale) */
  --radius-badge: 4px;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-dialog: 10px;
  --spacing-gutter: 16px;
  --container-page: 1100px;
}