/* ---------------------------------------------------------------------------
   Design tokens. The single source of truth for the whole suite: every tool
   draws from these, so a new tool inherits the platform's identity for free.
   Deliberately small -- one accent, few semantic colors, one type family pair.
   --------------------------------------------------------------------------- */
:root {
  /* Type ------------------------------------------------------------------ */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --text-xs:   11px;
  --text-sm:   12.5px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   21px;
  --text-2xl:  26px;
  --text-3xl:  32px;

  /* Surfaces & ink.
     The neutrals are deliberately near-neutral rather than blue-tinted: a blue
     cast across the greys is what made large areas of the page read as one
     pale wash. Lines and the page ground are dark enough to separate a panel
     from what is behind it without needing a shadow. ----------------------- */
  --ink:       #0D1013;  /* primary text, primary buttons, top and bottom bars */
  --ink-2:     #2C3136;  /* secondary text */
  --muted:     #565C63;  /* labels, captions */
  --faint:     #838A91;  /* disabled, tertiary */
  --line:      #C8CDD2;  /* standard border */
  --line-2:    #DFE3E6;  /* internal dividers */
  --line-ctl:  #7E858C;  /* borders of interactive controls: inputs, selects,
                            secondary buttons. Dark enough to clear the 3:1
                            WCAG minimum for a UI component boundary on both
                            the panel and the page ground. */
  --canvas:    #ECEEF0;  /* page background */
  --surface:   #FFFFFF;  /* panels, cards */
  --surface-2: #F4F5F7;  /* inset / hover rows */

  /* The dark bars that frame the page. Same family as --ink so the header,
     the footer and a primary metric tile read as one material. ------------- */
  --bar:        #14181C;
  --bar-text:   #EDEFF1;
  --bar-muted:  #9BA3AA;
  --bar-line:   #2C3238;

  /* Accent: one performance accent for the whole suite. Tools do not get
     their own colors -- the suite must read as one product. ---------------- */
  --accent:      #0A5A73;
  --accent-hi:   #073F52;
  --accent-tint: #DFEBF0;
  --accent-line: #9CC1CF;
  --accent-on-dark: #6FC5E0;  /* links and focus against the dark bars */

  /* Semantic, used sparingly ---------------------------------------------- */
  --climb:    #8C4A2F;
  --descent:  #3C6B58;
  --live:     #E06A2B;  /* transient playback / hover indicator only */
  --danger:   #A32E28;
  --danger-tint: #FCF0EF;

  /* Space ----------------------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 8px;

  --shell-max: 1240px;
  --prose-max: 68ch;
  --header-h:  56px;

  --focus: 2px solid var(--accent);
}