/**
 * Sigma Brand: CSS design tokens
 * Black, signal yellow and white. Loud type, square corners, clear numbers.
 * Generated from the Sigma Design System tokens (Claude Design). Edit there, then regenerate.
 * Light-first. Dark mode: set data-theme="dark" on the html element.
 */

:root, [data-theme="light"] {
  --bg: #FFFFFF;  /* Page background. Pure white in light mode, black in dark. */
  --surface: #FFFFFF;  /* Panels, tables, inputs. Sits on bg, separated by a line, not a tint. */
  --surface-sunk: #F1F1F1;  /* Subtotal rows and wells. Sits on surface or bg. */
  --ink: #0B0B0C;  /* All text and figures on bg, surface and surface-sunk. */
  --ink-muted: #5E5E62;  /* Secondary text, eliminations and zeros on bg, surface and surface-sunk. */
  --line: #0B0B0C;  /* The 2px outline around panels, tables, inputs and buttons. Also the rule under a subtotal. Softer in dark mode so the page does not glare. */
  --rule: #D9D9D9;  /* The 1px hairline between table rows. Decorative only. */
  --black: #0B0B0C;  /* Fixed black that does not flip with the theme. Logo tile, nameplate, text on signal. */
  --white: #FFFFFF;  /* Fixed white. Text on black and on band. */
  --signal: #FFD60A;  /* The brand yellow. A solid fill: the mark, the nameplate, the active tab, the consolidated column header, the key action. Never text on white. */
  --on-signal: var(--black);  /* Text and marks on signal. */
  --signal-pale: #FFF6C2;  /* Wash down the consolidated column or behind a selected row. Ink text on it. */
  --signal-text: #7A6000;  /* The only yellow allowed as text or as a focus ring, on bg and surface. */
  --band: #0B0B0C;  /* Solid dark band: the top bar, table header row and the final total row. */
  --on-band: var(--white);  /* Text on band. */
  --button: #0B0B0C;  /* Primary button fill. Black in light mode, white in dark, so yellow stays reserved for the signal action. */
  --on-button: #FFFFFF;  /* Label on a primary button. */
  --chip-blue: #0A5CFF;  /* Signage color 1. A company's square dot or a chart series. A fill with the name in ink beside it. Same value in both themes. */
  --chip-red: #F03A1E;  /* Signage color 2. Company dot or chart series. */
  --chip-green: #00A562;  /* Signage color 3. Company dot or chart series. */
  --chip-violet: #7A3CFF;  /* Signage color 4. Company dot or chart series. */
  --chip-orange: #C2410C;  /* Signage color 5. Company dot or chart series. */
  --chip-teal: #008C99;  /* Signage color 6. Company dot or chart series. */
  --gain: #007A47;  /* Status text: favorable change, synced, balanced. On bg, surface and surface-sunk. On band use gain-on-band. */
  --gain-on-band: #3DDC97;  /* Favorable change text on band, such as the change line in the dark headline tile. */
  --loss: #C22A12;  /* Status text: unfavorable change, error, out of balance. On bg, surface and surface-sunk. */
  --warn: #8A5A00;  /* Status text: needs attention. On bg and surface. */
}

[data-theme="dark"] {
  --bg: #0B0B0C;
  --surface: #151517;
  --surface-sunk: #222225;
  --ink: #F4F4F5;
  --ink-muted: #B0B0B6;
  --line: #8E8E96;
  --rule: #38383C;
  --signal-pale: #2E2800;
  --signal-text: #FFD60A;
  --band: #2A2A2E;
  --button: #FFFFFF;
  --on-button: #0B0B0C;
  --gain: #3DDC97;
  --loss: #FF6B52;
  --warn: #FFC24D;
  color-scheme: dark;
}

:root {
  --font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px;  /* Gap between a dot and its label. */
  --space-2: 8px;  /* Gap between related controls. */
  --space-3: 12px;  /* Table cell padding. Gap between panels on phones. */
  --space-4: 16px;  /* Panel padding. Page side gutter on phones. */
  --space-6: 24px;  /* Page side gutter on desktop. Gap between sections. */
  --space-8: 32px;  /* Gap between page sections. */
  --space-12: 48px;  /* Gap between marketing sections. */
  --tap-min: 46px;  /* Smallest height and width of anything tappable. */
  --radius-none: 0px;  /* Everything. Sigma has square corners: panels, buttons, inputs, tiles, the logo. */
  --radius-full: 999px;  /* Avatars only. */
  --stroke-thick: 2px;  /* The outline around panels, tables, inputs and buttons, in line. */
  --stroke-thin: 1px;  /* Hairlines between table rows, in rule. */
  --stripe-pitch: 14px;  /* Width of one band in the hazard stripe. */
  --stripe-height: 10px;  /* Height of the hazard stripe. */
  --numeric: tabular-nums lining-nums;  /* every figure that sits in a column */
}

.display-xl { font-family: var(--font-display); font-size: 72px; line-height: 68px; font-weight: 900; text-transform: uppercase; }
.display-lg { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 800; text-transform: uppercase; }
.heading { font-family: var(--font-display); font-size: 26px; line-height: 28px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.total { font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; font-variant-numeric: var(--numeric); }
.button-label { font-family: var(--font-display); font-size: 17px; line-height: 20px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.figure-xl { font-family: var(--font-display); font-size: 56px; line-height: 56px; font-weight: 800; font-variant-numeric: var(--numeric); }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; }
.figure { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: var(--numeric); }
.label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }

.hazard-stripe { height: var(--stripe-height); background: repeating-linear-gradient(-45deg, var(--signal) 0 var(--stripe-pitch), var(--black) var(--stripe-pitch) calc(var(--stripe-pitch) * 2)); }

/* Dropdowns. The browser's own arrow sits hard against the right edge and ignores padding,
   so Sigma draws its own: a square-ended chevron 14px in from the edge, with room kept clear
   for it. Applies to every single-choice <select>. The rules are marked !important so an
   app's own select styling (a background or padding shorthand) cannot knock the arrow out. */
select:not([multiple]):not([size]), .select {
  -webkit-appearance: none !important; appearance: none !important;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5l5 5 5-5' fill='none' stroke='%230B0B0C' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
}
[data-theme="dark"] select:not([multiple]):not([size]), [data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5l5 5 5-5' fill='none' stroke='%23F4F4F5' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") !important;
}