/* Design tokens: the single source of truth for the website's look (see .claude/DESIGN-SYSTEM.md). Pages and components use the
   ROLE tokens below. Edit a role value here to retune it everywhere, in one theme. Up/down candle colours come from the
   success/danger roles. Fonts are self-hosted in /fonts (Inter and JetBrains Mono, SIL OFL; licences sit beside the files). */
@font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); }

:root { color-scheme: dark;
  /* ---- colour roles ---- */
  --surface-0: #0a0a0c;
  --surface-1: #111114;
  --surface-2: #17171b;
  --surface-3: #1e1e23;
  --surface-4: #2a2a31;
  --border: #212127;
  --border-strong: #33333b;
  --text: #ececf1;
  --text-2: #a9a9b4;
  --text-3: #7b7b87;
  --text-4: #54545e;
  --accent: #6d5dfc;
  --accent-hover: #5c4cf0;
  --accent-strong: #4c3fd1;
  --accent-soft: #1a1735;
  --accent-border: #342f6e;
  --accent-text: #a99dff;
  --success: #26a69a;
  --success-text: #4be3bd;
  --success-soft: #0e2622;
  --success-border: #1f5a52;
  --danger: #ef5350;
  --danger-text: #ff7b7b;
  --danger-soft: #2a1315;
  --danger-border: #512329;
  --warning: #f0a030;
  --warning-text: #f0b868;
  --warning-soft: #2a2010;
  --warning-border: #4a3818;
  --on-accent: #ffffff;
  --on-warning: #1b1405;                          /* dark text on an amber fill, same in both themes */
  --chart-bg: #0c0c0f; --chart-text: #c6c6ce; --chart-grid: #18181d; --chart-border: #26262d;
  --chart-card-bg: #111114; --chart-card-grid: #1b1b21;

  /* ---- type: Inter for text, JetBrains Mono for figures; eight sizes (fs-8 only for a page's primary figure), three weights ---- */
  --font: "Inter Variable", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 16px; --fs-6: 20px; --fs-7: 26px; --fs-8: 40px; /* display: the one primary figure on a page */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --lh-tight: 1.25; --lh-body: 1.5;

  /* ---- shape, space and motion: 4px grid, three radii ---- */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .045); /* a faint lit top edge on cards: depth without a drop shadow */
  --scrim: rgba(4, 4, 8, .62);                     /* flat backdrop behind a modal or palette, no blur */
  --shadow-float: 0 20px 56px rgba(0, 0, 0, .55);  /* the only shadow: floating popovers and modals */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .16s;
}

:root[data-theme="light"] { color-scheme: light;
  --scrim: rgba(24, 24, 40, .3);
  --shadow-float: 0 14px 40px rgba(20, 20, 40, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0);
  --surface-0: #f7f7f9;
  --surface-1: #ffffff;
  --surface-2: #f3f3f6;
  --surface-3: #ebebf0;
  --surface-4: #dddde4;
  --border: #e5e5ea;
  --border-strong: #cfcfd8;
  --text: #121216;
  --text-2: #44444e;
  --text-3: #6d6d79;
  --text-4: #a6a6b0;
  --accent: #5b4bf0;
  --accent-hover: #4a3ae0;
  --accent-strong: #3d2fc4;
  --accent-soft: #efecff;
  --accent-border: #cdc6ff;
  --accent-text: #4a3ae0;
  --success: #22958b;
  --success-text: #19876d;
  --success-soft: #e8f6f2;
  --success-border: #9fd8c9;
  --danger: #e5484d;
  --danger-text: #c62828;
  --danger-soft: #fdeeee;
  --danger-border: #f0b8b8;
  --warning: #ef971d;
  --warning-text: #b5761c;
  --warning-soft: #fbf3e4;
  --warning-border: #e4d7c0;
  --on-accent: #ffffff;
  --on-warning: #1b1405;
  --chart-bg: #ffffff; --chart-text: #4a4a56; --chart-grid: #eeeef2; --chart-border: #d9d9e0;
  --chart-card-bg: #ffffff; --chart-card-grid: #f0f0f4;
}

/* Popovers and menus use --shadow-float (they float); cards and panels are flat, separated by hairlines and a faint lit edge. */