/* North Sea Surf — generated from tokens.json */
:root, [data-theme="light"] {
  --ui-surface: #DCE0DF;
  --ui-line: rgba(35,41,46,0.14);
  --ui-ink: #1F262A;
  --ui-ink-muted: #4D575B;
  --ui-control: #3E474C;
  --ui-control-ink: #EEF0EE;
  --ui-track: #C3C9C8;
  --ui-raised: #EEF0EE;
  --ui-display: #1F262A;
  --ui-display-ink: #EEF0EE;
  --ui-display-muted: #B9C2C4;
  --lifeboat: #F2621B;
  --lifeboat-deep: #C84A0A;
  --lifeboat-ink: #FFFFFF;
  --chart-sea: #EEEEEB;
  --chart-land: #FBFAF6;
  --chart-coast: #5F6863;
  --chart-grid: rgba(0,0,0,0.05);
  --chart-isobar: #1E1E1C;
  --chart-high: #6E6E69;
  --height-1: #E3E7EC;
  --height-2: #CCD4DD;
  --height-3: #B2BECB;
  --height-4: #97A7B7;
  --height-5: #7E91A4;
  --height-6: #697F94;
  --height-7: #596F85;
  --period-1: #E5E7EC;
  --period-2: #CDD1DC;
  --period-3: #B1B8C9;
  --period-4: #949DB4;
  --period-5: #7B84A0;
  --wind-1: #AEB9C0;
  --wind-2: #94A2AB;
  --wind-3: #7B8B96;
  --wind-4: #647581;
  --wind-5: #4F606D;
  --wind-6: #3C4D5A;
}
[data-theme="dark"] {
  --ui-surface: #252B2E;
  --ui-line: rgba(220,224,223,0.14);
  --ui-ink: #E4E8E7;
  --ui-ink-muted: #9AA5A8;
  --ui-control: #C9D0CF;
  --ui-control-ink: #1F262A;
  --ui-track: #3A4246;
  --ui-raised: #2E3539;
  --ui-display: #0E1214;
  --ui-display-ink: #E4E8E7;
  --ui-display-muted: #9AA5A8;
  --lifeboat: #F2621B;
  --lifeboat-deep: #F2621B;
  --lifeboat-ink: #FFFFFF;
  --chart-sea: #151617;
  --chart-land: #26292B;
  --chart-coast: #7A8580;
  --chart-grid: rgba(255,255,255,0.04);
  --chart-isobar: #D6D6D2;
  --chart-high: #8C8C88;
  --height-1: #1C2128;
  --height-2: #232B35;
  --height-3: #2C3746;
  --height-4: #374559;
  --height-5: #43546C;
  --height-6: #506480;
  --height-7: #5E7593;
  --period-1: #1D2129;
  --period-2: #262C38;
  --period-3: #313949;
  --period-4: #3D475B;
  --period-5: #4A566E;
  --wind-1: #55626D;
  --wind-2: #66757F;
  --wind-3: #788893;
  --wind-4: #8B9BA6;
  --wind-5: #9EAFBA;
  --wind-6: #B2C3CE;
}
:root {
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --space-0\.5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-6: 24px;
  --radius-xs: 2px;
  --radius-inner: 3px;
  --radius-card: 4px;
  --radius-frame: 6px;
}
.time { font-family: var(--font-mono); font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.6px; }
.band { font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: 0.8px; }
.meta { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: 0.6px; }
.scale { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; letter-spacing: 0.6px; }
.data { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 400; }
.tip { font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 600; }
.chart-figure { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 400; }
.centre { font-family: var(--font-mono); font-size: 22px; line-height: 1; font-weight: 600; }
.place { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 500; }
.sea-area { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-weight: 400; letter-spacing: 1px; }