/* SvgCAD site — design tokens (deliverable 2, per D-036)
 *
 * The palette is not invented. It is the app's own, from `v5/src/index.tmpl.html`:
 *   --ink #101216  --ink-2 #15181d  --line #31363f  --line-soft #262b33
 *   --txt #d8dce4  --muted #828d9c  --dim #5d6774   --brass #d9a441
 * The drawings on this site are drawn in inks meant for that ground, so the site sets its
 * figures on it in both themes rather than recolouring a drawing to suit a page. The light
 * theme is the same palette inverted about paper, keeping the app's cool cast; the dark
 * theme is the app itself.
 *
 * Two accents, each with one job:
 *   --accent   structure and action - the app's own drawing blue (#7fb2d4)
 *   --signal   "not built yet", and nothing else - the app's brass (#d9a441)
 * A reader who learns that brass means coming on one page knows it on every page.
 *
 * Three theme states, per the platform's own rule: bare :root carries the whole light
 * palette; prefers-color-scheme redefines the tokens for a viewer who has not chosen;
 * [data-theme] wins over both. No component ever names a colour outside this file.
 */

:root {
  /* --- ground and ink ------------------------------------------------ */
  --paper:      #F2F3F5;   /* the page */
  --surface:    #FFFFFF;   /* a card, a table, a form field */
  --surface-2:  #E8EBEF;   /* a quieter block: pricing head, footer */
  --ink:        #101216;   /* body text - the app's own ink */
  --ink-2:      #464E58;   /* secondary text */
  --ink-3:      #5A626C;   /* captions, meta - 5.57:1 on paper, 5.17:1 on surface-2,
                              measured; the lighter grey it started as failed AA */
  --rule:       #C9CFD7;   /* a drawn line */
  --rule-soft:  #E1E5EA;   /* a table's inner rules */

  --accent:     #1C5C85;   /* links, the primary action, section marks */
  --accent-ink: #FFFFFF;   /* text on the accent */
  --accent-bg:  #E7EEF4;   /* the accent at 8% - a quiet panel */
  --signal:     #7A5709;   /* [coming] and nothing else */
  --signal-bg:  #F6EEDC;

  /* the figures' ground is the app's canvas, in both themes - never themed */
  --figure:     #101216;
  --figure-rule:#2A2F38;

  --focus:      #1C5C85;

  /* --- type ---------------------------------------------------------- */
  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* a fifth-major scale, rounded to whole pixels and clamped for small screens */
  --t-hero:  clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --t-h1:    clamp(2.25rem, 1.5rem + 3.0vw, 3.75rem);
  --t-h2:    clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
  --t-h3:    1.375rem;
  --t-lede:  clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --t-body:  1.0625rem;
  --t-small: 0.9375rem;
  --t-mono:  0.8125rem;
  --t-micro: 0.6875rem;

  --lh-tight: 1.04;
  --lh-head:  1.12;
  --lh-body:  1.62;

  /* --- space --------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* --- grid ---------------------------------------------------------- */
  --page:   1240px;        /* twelve columns live inside this */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 66ch;         /* running prose never runs wider */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0B0D10;
    --surface:    #15181D;
    --surface-2:  #101216;
    --ink:        #D8DCE4;
    --ink-2:      #9AA3B0;
    --ink-3:      #79828E;
    --rule:       #2C323B;
    --rule-soft:  #21262D;

    --accent:     #7FB2D4;
    --accent-ink: #0B0D10;
    --accent-bg:  #16212A;
    --signal:     #D9A441;
    --signal-bg:  #241D0F;

    --figure-rule:#2A2F38;
    --focus:      #7FB2D4;
  }
}

:root[data-theme="dark"] {
  --paper:      #0B0D10;
  --surface:    #15181D;
  --surface-2:  #101216;
  --ink:        #D8DCE4;
  --ink-2:      #9AA3B0;
  --ink-3:      #79828E;
  --rule:       #2C323B;
  --rule-soft:  #21262D;

  --accent:     #7FB2D4;
  --accent-ink: #0B0D10;
  --accent-bg:  #16212A;
  --signal:     #D9A441;
  --signal-bg:  #241D0F;

  --figure-rule:#2A2F38;
  --focus:      #7FB2D4;
}