/* The Smitz Laboratories look, as the Workforce desk carries it (its src/client/styles/tokens.css), for
   accounts.smitzlabs.com. The style guide's tokens by name, the spacing and type scale, frosted glass,
   and the dark theme. Components use these names and never a raw color.

   The theme is an attribute on the root element: <html data-theme="dark"> for dark, none (or "light")
   for light. Accounts keeps its own setting for it (accounts-ui.md, The theme). */
:root {
  /* Brand: two colors and four neutrals (K7), with the accent red in two shades: one for light grounds
     and one for dark. Both are constants that art and drawings may use on either ground. --red is the
     one a component uses: it follows the theme, so text and borders always get the shade that holds
     the same contrast. Signal Red on white is 4.91:1; Signal Red Lit on Charcoal Deep is 4.91:1
     (ruled by Kyle, 14 October 2026). On the lighter dark surfaces (cards 4.22:1, tint 4.11:1) it is
     below 4.5:1: red text on dark belongs on the dark ground, or at a size where 3:1 is enough.
     The logo and its wordmark (the plain-text lockup too) keep Signal Red on dark: 3.39:1, large shapes
     and type only (ruled 14 Oct 2026). */
  --grey: #58585A;   /* Charcoal Grey, primary and neutral */
  --red-signal: #DC1F2D;  /* Signal Red, the accent on light grounds: scarce */
  --red-lit: #E85D67;     /* Signal Red Lit, the accent on dark grounds: the same hue and saturation, lighter */
  --red: var(--red-signal);  /* the accent for the current theme; the dark theme sets it to --red-lit */
  --grey-light: #C9C8C4;  /* Charcoal Light: the grey ink of the dark logo, 9.95:1 on Charcoal Deep (ruled 14 Oct 2026) */
  --deep: #1E1E1F;   /* Charcoal Deep, dark ground */
  --paper: #FBFAF8;  /* Paper: panes and grounds (G-12) */
  --tint: #F1EFEB;   /* Tint: small surfaces only (G-12) */
  --line: #DEDBD4;   /* Line */

  /* Frosted glass (G-13 B on the wall; G-16 for the cards on the stage): the art blurred behind
     translucent white, with a lit top edge. Panes take a denser white than the wall: at 82% white,
     Charcoal Grey text holds 4.5:1 even over Charcoal Deep at full strength, the darkest the art
     can be behind a card. */
  --glass-pane: rgba(255, 255, 255, 0.82);
  --glass-blur: blur(18px);
  --glass-edge: rgba(255, 255, 255, 0.95);

  /* Surfaces the theme changes (TH-1): an editor or a message on a pane, the small icon tiles, the
     wall's glass, the scrim behind a dialog, and shadows. */
  --surface: #FFFFFF;
  --icon-glass: rgba(255, 255, 255, 0.7);
  --icon-glass-hover: rgba(255, 255, 255, 0.95);
  --wall-glass: rgba(255, 255, 255, 0.74);
  --wall-glass-edge: rgba(255, 255, 255, 0.8);
  --wall-field: rgba(255, 255, 255, 0.66);
  --wall-field-focus: rgba(255, 255, 255, 0.9);
  --wall-glass-solid: rgba(255, 255, 255, 0.92);
  --scrim: rgba(30, 30, 31, 0.32);
  --shadow: rgba(30, 30, 31, 0.22);
  --on-red: #FFFFFF;

  /* The switch (TH-1): white when off and Signal Red when on, in both themes, so it is not redefined
     under dark. Named here so a component never writes a raw color. */
  --switch-off: #FFFFFF;
  --switch-edge: #DEDBD4;
  --switch-knob: #58585A;

  /* Spacing, on a 4-pixel base (UI-4). */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Type sizes (UI-4): marks and chips, body and rows, pane titles, a record's name, the header. */
  --type-mark: 12px; --type-body: 14px; --type-title: 16px; --type-name: 20px; --type-header: 28px;

  /* Type (K7, updated 14 October 2026): Smitz Sans, our own typeface with no license limits on the web
     (../public/fonts/smitz-sans/smitz-sans.css loads it). Helvetica Neue is the fallback and the print face where
     it is licensed; Arial and the system sans come after. Weights: 300 light, 400 body, 700 head, 800 heavy
     (the token keeps its old name, --weight-black); 500 and 900 exist in the family for design use. */
  --font: "Smitz Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --weight-body: 400; --weight-light: 300; --weight-head: 700; --weight-black: 800;
  --track-label: 0.2em; /* wide-tracked uppercase, short labels only */
}

/* The dark theme (TH-1; M6-1 A): Charcoal Deep is the ground, the panes are dark glass, and the text
   is Paper, and --red is Signal Red Lit. The brand tokens keep their jobs: --grey is the ink, --paper the ground, --tint a small
   surface, --line a rule, --deep the strongest contrast with the ground (a strong button's hover, an
   error). Paper on Charcoal Deep is about 16:1; Paper on the darkest pane over the brightest art
   holds 4.5:1. The art keeps its colors (G-17): the drawings switch to their dark versions. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --red: var(--red-lit);
  --grey: #FBFAF8;
  --paper: #1E1E1F;
  --tint: #2C2C2E;
  --line: #3E3E41;
  --deep: #FFFFFF;
  --glass-pane: rgba(30, 30, 31, 0.86);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --surface: #2A2A2C;
  --icon-glass: rgba(44, 44, 46, 0.72);
  --icon-glass-hover: rgba(62, 62, 65, 0.95);
  --wall-glass: rgba(30, 30, 31, 0.78);
  --wall-glass-edge: rgba(255, 255, 255, 0.14);
  --wall-field: rgba(44, 44, 46, 0.8);
  --wall-field-focus: rgba(62, 62, 65, 0.95);
  --wall-glass-solid: rgba(30, 30, 31, 0.94);
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--grey); font: var(--weight-body) var(--type-body)/1.45 var(--font); }
a { color: var(--grey); }
:focus-visible { outline: 2px solid var(--grey); outline-offset: 2px; }
/* The art's ground follows the theme; its shapes do not (G-17). */
.art-ground { fill: var(--paper); }