:root {
  /*
   * Wild North Instruments brand tokens v1.
   * Source: docs/design/wild-north-brand-system/brand-system-v1.html.
   * Framework-free by design: import this file before app-specific overrides.
   */

  /* Neutrals: dark-first terrain palette. */
  --wn-color-obsidian: #0A0B0D;
  --wn-color-basalt: #121417;
  --wn-color-slate: #24272C;
  --wn-color-scree: #7E858F;
  --wn-color-snow: #F4F6F8;
  --wn-color-snow-muted: #C3C8CE;
  --wn-color-snow-dim: #9AA0A8;

  /*
   * Signal colors.
   * Alpenglow drives CTAs, live/active states, and warnings.
   * Glacier is a quiet secondary for data and links.
   * Together they must stay at or below roughly 10% of a screen.
  */
  --wn-color-alpenglow: #FF5A1E;
  --wn-color-glacier: #79A9BD;

  /*
   * General UI status color; not part of the signal-color screen budget and
   * not an avalanche hazard token.
   */
  --wn-color-success: #6BBF6F;

  /*
   * SAFETY-CRITICAL AVALANCHE HAZARD COLORS.
   * DO NOT ADOPT THESE TOKENS FOR LIVE SLOPE, AVALANCHE, ROUTE, WARNING,
   * OR RESCUE SURFACES UNTIL THEY ARE VERIFIED AGAINST THE EAWS STANDARD
   * PALETTE, INCLUDING LEVEL NAMES, AND THE FOUNDER HAS SIGNED OFF.
   */
  --wn-hazard-1-low: #4E9A51;
  --wn-hazard-2-moderate: #F2C744;
  --wn-hazard-3-considerable: #EE7B2B;
  --wn-hazard-4-high: #D6392C;
  --wn-hazard-5-extreme: #1A1A1A;
  --wn-hazard-5-extreme-accent: #D6392C;

  /* Typography stacks. Load Archivo, IBM Plex Sans, and IBM Plex Mono upstream. */
  --wn-font-display: "Archivo", sans-serif;
  --wn-font-body: "IBM Plex Sans", sans-serif;
  --wn-font-data: "IBM Plex Mono", monospace;
  --wn-display-weight-min: 700;
  --wn-display-weight-max: 900;
  --wn-display-transform: uppercase;
  --wn-display-tracking-tight: 0.01em;
  --wn-display-tracking: 0.03em;
  --wn-display-tracking-wide: 0.08em;
  --wn-label-tracking: 0.20em;
  --wn-label-tracking-wide: 0.24em;
  --wn-body-line-height: 1.6;
  --wn-data-line-height: 1.7;

  /*
   * Faceted geometry: sharp corners, angular ridgelines, structure over ornament.
   * Keep broad rounding rare. Chips are the exception because status badges need
   * compact capsule scanning. The icon squircle radius is a CSS preview
   * approximation; platform icon masks still own the true squircle shape.
   */
  --wn-radius-control: 3px;
  --wn-radius-surface: 4px;
  --wn-radius-browser-frame: 8px;
  --wn-radius-chip: 100px;
  --wn-radius-icon-squircle: 24%;
  --wn-border-hairline: 1px;
  --wn-border-strong: #3A3F46;
  --wn-border-muted: var(--wn-color-slate);
  --wn-surface-readout: #0E0F12;

  /* Controls from the UI Components page. */
  --wn-button-font-family: var(--wn-font-display);
  --wn-button-font-weight: 700;
  --wn-button-text-transform: uppercase;
  --wn-button-letter-spacing: 0.08em;
  --wn-button-font-size: 13px;
  --wn-button-padding-block: 13px;
  --wn-button-padding-inline: 22px;
  --wn-button-radius: var(--wn-radius-control);

  --wn-button-primary-bg: var(--wn-color-alpenglow);
  --wn-button-primary-fg: var(--wn-color-obsidian);
  --wn-button-primary-border: transparent;
  --wn-button-secondary-bg: transparent;
  --wn-button-secondary-fg: var(--wn-color-snow);
  --wn-button-secondary-border: var(--wn-border-strong);
  --wn-button-ghost-bg: transparent;
  --wn-button-ghost-fg: var(--wn-color-scree);
  --wn-button-ghost-border: transparent;
  --wn-button-ghost-padding-inline: 8px;

  --wn-input-bg: var(--wn-color-obsidian);
  --wn-input-fg: var(--wn-color-snow);
  --wn-input-border: var(--wn-color-slate);
  --wn-input-radius: var(--wn-radius-control);
  --wn-input-padding-block: 13px;
  --wn-input-padding-inline: 16px;

  /* Status chips from the UI Components page. */
  --wn-chip-font-family: var(--wn-font-data);
  --wn-chip-font-size: 11px;
  --wn-chip-letter-spacing: 0.12em;
  --wn-chip-radius: var(--wn-radius-chip);
  --wn-chip-padding-block: 6px;
  --wn-chip-padding-inline: 12px;

  --wn-chip-live-bg: rgba(255, 90, 30, 0.14);
  --wn-chip-live-fg: var(--wn-color-alpenglow);
  --wn-chip-live-border: rgba(255, 90, 30, 0.30);
  --wn-chip-offline-bg: var(--wn-color-obsidian);
  --wn-chip-offline-fg: var(--wn-color-snow-dim);
  --wn-chip-offline-border: var(--wn-color-slate);
  --wn-chip-synced-bg: rgba(78, 154, 81, 0.14);
  --wn-chip-synced-fg: var(--wn-color-success);
  --wn-chip-synced-border: rgba(78, 154, 81, 0.30);

  /* Data/readout surfaces. */
  --wn-readout-grid-bg: var(--wn-color-slate);
  --wn-readout-cell-bg: var(--wn-surface-readout);
  --wn-readout-label-font-size: 10px;
  --wn-readout-label-tracking: 0.20em;
  --wn-readout-value-font-family: var(--wn-font-data);
  --wn-readout-value-font-size: 30px;
  --wn-readout-value-weight: 500;
  --wn-readout-hazard-font-family: var(--wn-font-display);
  --wn-readout-hazard-font-size: 22px;
  --wn-readout-hazard-weight: 800;
}