/* =========================================================================
   Design tokens
   ========================================================================= */
:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'JetBrains Mono', ui-monospace, monospace;

  /* Overlay ink channel — hardcoded overlays throughout the stylesheet
     use rgba(var(--ink-rgb), X). Flip this one value and every subtle
     surface/border/text layer flips with the theme. */
  --ink-rgb: 0, 0, 0;

  /* Light canvas — Sendel Mist */
  --bg: #F2F5F3;
  --bg2: rgba(var(--ink-rgb), 0.03);
  --bg3: rgba(var(--ink-rgb), 0.05);

  /* Text — tx3 bumped to 0.55 for WCAG AA (4.5:1) on light bg.
     The --ink-rgb flip means dark mode gets the equivalent boost
     automatically (lighter alpha = brighter white on the dark canvas). */
  --tx:  rgba(var(--ink-rgb), 0.88);
  --tx2: rgba(var(--ink-rgb), 0.58);
  --tx3: rgba(var(--ink-rgb), 0.55);

  /* Borders */
  --bd:  rgba(var(--ink-rgb), 0.1);
  --bd2: rgba(var(--ink-rgb), 0.18);

  /* Accent (Sendel Moss) — darker for contrast on light */
  --acc:    #2E6B4A;
  --acc-tx: #2E6B4A;
  /* Moss as raw R,G,B channels, for rgba() glows/auras that need an alpha
     ramp the hex token can't give (e.g. the living-sparkle breathe). Matches
     the --acc-bg literal already in this file; like its --acc-bg
     sibling a single value is correct in both themes (the glow reads on Mist
     and on the dark canvas alike). */
  --acc-rgb: 46, 159, 98;
  --acc-bg: rgba(46, 159, 98, 0.14);
  --acc-bg-soft: rgba(46, 159, 98, 0.07);
  --btn-primary-bg: rgba(46, 159, 98, 0.18);
  --btn-primary-tx: #2E6B4A;

  /* Account tag palettes — saturated text for light bg */
  --blue-bg:   rgba(55, 138, 221, 0.14);
  --blue-tx:   #1e5ca0;
  --amber-bg:  rgba(186, 117, 23, 0.16);
  --amber-tx:  #8a5f10;
  --coral-bg:  rgba(216, 90, 48, 0.16);
  --coral-tx:  #b54a20;
  --purple-bg: rgba(125, 115, 220, 0.14);
  --purple-tx: #4d42a8;

  /* Full-screen regen dim: sits over the three analysis cards. */
  --overlay-backdrop: rgba(242, 245, 243, 0.6);

  /* Radius scale (FINDING-T8). Use these tokens for new components;
     the codebase still has some literal 6px / 10px / 14px values from
     before the token system landed. Don't add new ones. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Type scale (FINDING-T7). The codebase still has some literal sizes
     (12px is the most common body weight, 10px appears 34× mostly for
     mono labels). Use these tokens for new components. Hard floor:
     nothing smaller than 11px in body content. Half-pixels (10.5, 11.5,
     12.5, 13.5) are forbidden — they're pixel-pushing, not a scale. */
  --text-xs:   11px;  /* mono labels, captions, account-name chips */
  --text-sm:   12px;  /* body baseline, chips, secondary text */
  --text-base: 13px;  /* primary body text on dense surfaces */
  --text-md:   14px;  /* primary body text on light/comfortable surfaces */
  --text-lg:   17px;  /* section headings (H2) */
  --text-xl:   22px;  /* page headings (H1) */

  --topbar-h: 60px;
  --subnav-h: 65px;
}

[data-theme="dark"] {
  --ink-rgb: 255, 255, 255;

  --bg: #0D1A12;

  --acc:    #2E9F62;
  --acc-tx: #6FC893;
  --acc-bg: rgba(46, 159, 98, 0.18);
  --acc-bg-soft: rgba(46, 159, 98, 0.08);
  --btn-primary-bg: rgba(46, 159, 98, 0.32);
  --btn-primary-tx: #EAF6EE;

  --blue-bg:   rgba(55, 138, 221, 0.18);
  --blue-tx:   #9AC4F0;
  --amber-bg:  rgba(186, 117, 23, 0.2);
  --amber-tx:  #E8B978;
  --coral-bg:  rgba(216, 90, 48, 0.2);
  --coral-tx:  #F2A589;
  --purple-bg: rgba(125, 115, 220, 0.18);
  --purple-tx: #AFA9EC;

  --overlay-backdrop: rgba(13, 14, 12, 0.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  font-family: var(--font-main);
  color: var(--tx);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

.page-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 4rem;
}

.page-heading {
  margin: 0 0 1.25rem;
}
.page-heading h1 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tx);
  margin: 0 0 4px;
}
.page-heading .subtitle {
  font-size: 13px;
  color: var(--tx3);
}