/* Design tokens — THE single source of truth for the fablnx color scheme.
   Neutral VS Code chrome: true-grey surfaces (no blue tint) matching VS Code's
   Dark+ / Light+ neutrals, carrying the brand blue #1A6BA0 / cyan #0FA3CC accent.
   Derived alpha tokens use color-mix so overriding a base color cascades
   everywhere automatically. No component should hardcode a brand hex — reference
   these variables. Drawing sheets stay white paper on the dark canvas. */

:root {
  /* Brand primitives (brightened so they read as accent on a dark base) */
  --brand: #2a86c4;
  --brand-d: #1a6ba0;
  --brand-h: #3a9bd8;
  --cy: #22bce5;

  /* Accent (derives from brand primitives) */
  --accent: var(--brand);
  --accent-2: var(--cy);
  --accent-3: var(--brand-h);
  --accent-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);

  /* Surfaces & text (dark) — VS Code Dark+ neutrals; bg = editor, surfaces step up */
  --bg: #1e1e1e;
  --surface: #252526;
  --surface-2: #2d2d2d;
  --text: #cccccc;
  --text-h: #ffffff;
  --muted: #969696;
  --border: #3c3c3c;
  --code-bg: #1e1e1e;

  /* Branded navy panel (constant across themes — the login is always navy) */
  --navy-1: #16506f;
  --navy-2: #0c1b2a;
  --on-navy: #eaf3fb;

  /* Warning (offline banner) */
  --warn-1: #fde68a;
  --warn-2: #fca5a5;
  --warn-text: #3a2c05;

  /* Elevation & shape — flat tool chrome: hairline elevation, near-square corners */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 16px 40px -14px rgba(0, 0, 0, 0.6);
  --radius: 5px;
  --radius-lg: 7px;

  /* Density (CAD-tight tool chrome). Shared so the loading skeleton mirrors it. */
  --rail-w: 40px;
  --chrome-h: 30px;

  /* Type */
  /* VS Code's workbench UI stack + editor mono stack, for a familiar tool feel. */
  --sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe WPC', 'Ubuntu', 'Droid Sans', system-ui,
    sans-serif;
  --heading:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe WPC', 'Ubuntu', 'Droid Sans', system-ui,
    sans-serif;
  --mono:
    'SF Mono', Menlo, Monaco, Consolas, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', monospace;

  /* Scene member/grid hues — mirror features/scene/common/kindColors.js. */
  /* Tekla class colors: beam = class 14 blue, column = class 13 orange,
     brace = class 3 green — the 3D model view and every 2D surface match. */
  --cv-beam: #3972e3; /* Tekla class 14 blue */
  --cv-column: #ff7200; /* Tekla class 13 orange */
  --cv-brace: #55cc55; /* Tekla class 3 green (slightly tamed for UI dots) */
  --cv-grid: color-mix(in srgb, var(--border) 85%, transparent); /* neutral grey */
  --cv-level: #b483f0; /* violet — distinct from the blue beams */
  /* An offset: grid the drawings show but never named. Same blue-grey the scene
     editor's Offsets layer uses, so one kind of line is one colour everywhere. */
  --cv-offset: #9aa8ba;
  /* A slant: a sloped datum, which is what a level line is except not
     horizontal. Warm, because it is neither a level (violet) nor a grid line —
     a rafter reads as its own kind of thing at a glance. */
  --cv-slant: #f0a35e;
}

/* Light theme — overrides only the theme tokens; everything else (navy panel,
   accent/ring/shadow shape, brand-mix derivations) cascades from :root. */
:root[data-theme='light'] {
  /* VS Code Light+ neutrals — true greys, no blue tint */
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #e8e8e8;
  --text: #333333;
  --text-h: #1f1f1f;
  --muted: #6b6b6b;
  --border: #e5e5e5;
  --code-bg: #f0f0f0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 16px 40px -14px rgba(0, 0, 0, 0.28);
  /* deepen brand so accent reads on white; --accent* derive from these */
  --brand: #1f77b8;
  --brand-d: #155a86;
  --brand-h: #2a86c4;
  --cy: #0f9bc4;
}