/*
 * Field Lab v3 design tokens. GENERATED by tools/build-tokens.mjs from
 * reference/v3/field-lab-v3.tokens.json; edit the JSON, not this file.
 *
 * Light by default, dark when the OS prefers dark, and either can be forced
 * with data-theme="light" | "dark" on <html> (or any ancestor element).
 * Every colour also has a space-separated "-rgb" twin, so you can write
 * rgb(var(--ink-rgb) / .1) for a translucent tint.
 *
 * Colour roles:
 *   --bg          Page background. Cool specimen-glass green paper / deep bench green.
 *   --surface     Cards, panels, plates.
 *   --surface-2   Hover fills for list rows, wells, notices, disabled backgrounds.
 *   --ink         Primary text, borders, rules, inverse toast background. 15:1+ on bg.
 *   --ink-2       Secondary text, labels, captions. 6.5:1+ on all surfaces.
 *   --line        UI borders, input outlines, ruler ticks, hero hairlines. At least 3:1 on bg and surface.
 *   --hairline    Decorative graph-paper grid only. Never carries meaning.
 *   --accent      The one hot color. Reserved for: the single primary action per view, the headline mark, the scan line, and small live indicators (LEDs, status dots, row-arrow hover). Not for text on neutral.
 *   --accent-ink  Accent as text, error messages, sparklines. 5.4:1+ on bg.
 *   --on-accent   Alias of ink (light) / bg (dark). Text on accent fills. 5.4:1+ on accent.
 *   --focus       Alias of ink. 3px focus outline, 3px offset. Swapped to band-ink on the dark band and command bar.
 *   --chart-1     Alias of accent-ink. Categorical series 1.
 *   --chart-2     Alias of ink. Categorical series 2.
 *   --chart-3     Categorical series 3 (neutral green).
 *   --chart-4     Categorical series 4. Always hatched; 3:1 on surface.
 *   --stamp       Alias of ink in both themes. Hard offset shadow for hovered buttons.
 *   --band        Telemetry band and command bar background. Always dark. Equals ink in light theme.
 *   --band-ink    Text on band. 15:1+ on band.
 *   --band-ink-2  Secondary text on band. 7.9:1+ on band.
 *   --band-line   Rules and borders on band. At least 3:1 on band.
 *   --band-mint   Particle dots on band. Decorative.
 */
:root, [data-theme="light"] {
  --bg: #E9F0EC; --bg-rgb: 233 240 236;
  --surface: #F6F9F7; --surface-rgb: 246 249 247;
  --surface-2: #DCE6E0; --surface-2-rgb: 220 230 224;
  --ink: #0C1A16; --ink-rgb: 12 26 22;
  --ink-2: #40524B; --ink-2-rgb: 64 82 75;
  --line: #6B8077; --line-rgb: 107 128 119;
  --hairline: #C3D0C9; --hairline-rgb: 195 208 201;
  --accent: #FF4E1A; --accent-rgb: 255 78 26;
  --accent-ink: #B52C00; --accent-ink-rgb: 181 44 0;
  --on-accent: var(--ink); --on-accent-rgb: 12 26 22;
  --focus: var(--ink); --focus-rgb: 12 26 22;
  --chart-1: var(--accent-ink); --chart-1-rgb: 181 44 0;
  --chart-2: var(--ink); --chart-2-rgb: 12 26 22;
  --chart-3: #4F6B61; --chart-3-rgb: 79 107 97;
  --chart-4: #758A81; --chart-4-rgb: 117 138 129;
  --stamp: var(--ink); --stamp-rgb: 12 26 22;
  --band: #0C1A16; --band-rgb: 12 26 22;
  --band-ink: #E6EFEA; --band-ink-rgb: 230 239 234;
  --band-ink-2: #9DB1A8; --band-ink-2-rgb: 157 177 168;
  --band-line: #52706A; --band-line-rgb: 82 112 106;
  --band-mint: #6FE0B0; --band-mint-rgb: 111 224 176;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1311; --bg-rgb: 10 19 17;
    --surface: #111D1A; --surface-rgb: 17 29 26;
    --surface-2: #182824; --surface-2-rgb: 24 40 36;
    --ink: #E6EFEA; --ink-rgb: 230 239 234;
    --ink-2: #9DB1A8; --ink-2-rgb: 157 177 168;
    --line: #5E766C; --line-rgb: 94 118 108;
    --hairline: #223630; --hairline-rgb: 34 54 48;
    --accent: #FF6A3A; --accent-rgb: 255 106 58;
    --accent-ink: #FF7B4F; --accent-ink-rgb: 255 123 79;
    --on-accent: var(--bg); --on-accent-rgb: 10 19 17;
    --focus: var(--ink); --focus-rgb: 230 239 234;
    --chart-1: var(--accent-ink); --chart-1-rgb: 255 123 79;
    --chart-2: var(--ink); --chart-2-rgb: 230 239 234;
    --chart-3: #8DB0A3; --chart-3-rgb: 141 176 163;
    --chart-4: #5E766C; --chart-4-rgb: 94 118 108;
    --stamp: var(--ink); --stamp-rgb: 230 239 234;
    --band: #050C0A; --band-rgb: 5 12 10;
    --band-ink: #E6EFEA; --band-ink-rgb: 230 239 234;
    --band-ink-2: #9DB1A8; --band-ink-2-rgb: 157 177 168;
    --band-line: #52706A; --band-line-rgb: 82 112 106;
    --band-mint: #6FE0B0; --band-mint-rgb: 111 224 176;
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --bg: #0A1311; --bg-rgb: 10 19 17;
  --surface: #111D1A; --surface-rgb: 17 29 26;
  --surface-2: #182824; --surface-2-rgb: 24 40 36;
  --ink: #E6EFEA; --ink-rgb: 230 239 234;
  --ink-2: #9DB1A8; --ink-2-rgb: 157 177 168;
  --line: #5E766C; --line-rgb: 94 118 108;
  --hairline: #223630; --hairline-rgb: 34 54 48;
  --accent: #FF6A3A; --accent-rgb: 255 106 58;
  --accent-ink: #FF7B4F; --accent-ink-rgb: 255 123 79;
  --on-accent: var(--bg); --on-accent-rgb: 10 19 17;
  --focus: var(--ink); --focus-rgb: 230 239 234;
  --chart-1: var(--accent-ink); --chart-1-rgb: 255 123 79;
  --chart-2: var(--ink); --chart-2-rgb: 230 239 234;
  --chart-3: #8DB0A3; --chart-3-rgb: 141 176 163;
  --chart-4: #5E766C; --chart-4-rgb: 94 118 108;
  --stamp: var(--ink); --stamp-rgb: 230 239 234;
  --band: #050C0A; --band-rgb: 5 12 10;
  --band-ink: #E6EFEA; --band-ink-rgb: 230 239 234;
  --band-ink-2: #9DB1A8; --band-ink-2-rgb: 157 177 168;
  --band-line: #52706A; --band-line-rgb: 82 112 106;
  --band-mint: #6FE0B0; --band-mint-rgb: 111 224 176;
  color-scheme: dark;
}

:root {
  /* Type. Load the fonts yourself, e.g. Google Fonts:
   * Archivo:wdth 62..125,wght 100..900 | Hanken Grotesk:400,500,700 | IBM Plex Mono:400,500,600 */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-display-xl: 800 96px/80px var(--f-display);
  --t-h1: 800 56px/50px var(--f-display);
  --t-h2: 700 36px/36px var(--f-display);
  --t-h3: 700 24px/28px var(--f-display);
  --t-body: 400 17px/26px var(--f-body);
  --t-small: 400 14px/20px var(--f-body);
  --t-mono: 500 15px/22px var(--f-mono);
  --t-label: 500 12px/16px var(--f-mono);
  --t-spec: 500 10px/14px var(--f-mono);

  /* Spacing (4px base) */
  --space-1: 4px; /* Tick gaps, icon padding. */
  --space-2: 8px; /* Tight inline gaps. */
  --space-3: 12px; /* Button groups, field gaps. */
  --space-4: 16px; /* Minimum page gutter, card gaps. */
  --space-5: 24px; /* Card padding, stacks. */
  --space-6: 32px; /* Header to content. */
  --space-7: 48px; /* Large gutter, block gaps. */
  --space-8: 64px; /* Section padding. */
  --space-9: 96px; /* Hero and section breaks. */
  --bar-h: 64px; /* Command bar height; footer bottom padding and toast offset derive from it. */
  --section-y: 120px; /* Vertical gap between page sections and band padding. Dividers sit in the middle (half each side). 72px under 700px wide. */
  --gutter: clamp(16px, 4vw, 48px);

  /* Radius: square by default */
  --radius-none: 0px; /* Plates, panels, cards. Default. */
  --radius-sm: 2px; /* Buttons and inputs. */
  --radius-md: 4px; /* Rare. Popovers. */
  --radius-pill: 999px; /* Status pills and wallet chips only. */

  /* Shadows: hard offset "stamps", never blurred */
  --shadow-stamp: 3px 3px 0 var(--stamp); /* Hovered buttons. Hard offset, no blur, in ink. */
  --shadow-stamp-lg: 6px 6px 0 var(--stamp); /* Live readout panel. */
  --shadow-focus-ring: 0 0 0 3px var(--focus); /* Focus indicator (rendered as 3px outline, 3px offset). */

  /* Motion. One easing: cubic-bezier(0. */
  --ease: cubic-bezier(.7, 0, .2, 1);
}
@media (max-width: 700px) { :root { --section-y: 72px; } }