/* ============================================================
   WeatherWindow.AI — Redesign 2 · "Ocean-Instrument Editorial"
   Design tokens. Deep-ocean canvas · warm brass brand accent
   (rationed) · editorial serif display (Fraunces) + Inter body
   + Source Code Pro instrument data. Verdict/status hues are
   reserved for the recommendation system only.
   ============================================================ */

/* ---- Self-hosted fonts (CSP-safe, offline) ------------------ */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter'),
       url('fonts/InterVariable.woff2') format('woff2-variations'),
       url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url('fonts/Oswald-Variable.woff2') format('woff2-variations'),
       url('fonts/Oswald-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'),
       url('fonts/OpenSans-Variable.woff2') format('woff2-variations'),
       url('fonts/OpenSans-Variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: local('Source Code Pro'), url('fonts/SourceCodePro-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: local('Source Code Pro Medium'), url('fonts/SourceCodePro-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Code Pro';
  src: local('Source Code Pro SemiBold'), url('fonts/SourceCodePro-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- Ocean canvas — layered deep, faint warm undertone ---- */
  --ink-abyss: #040e1a;
  --ink:       #06121f;   /* page base */
  --ink-2:     #081a2b;
  --band:      #0a1e33;   /* alternate band */
  --panel:     #0c2138;   /* card / surface */
  --panel-2:   #103055;   /* raised / hover */
  --panel-3:   #16406e;

  /* ---- Hairlines & rules ---- */
  --line:      rgba(206,222,240,.09);
  --line-2:    rgba(206,222,240,.16);
  --line-3:    rgba(206,222,240,.24);
  --hair-brass:rgba(217,159,82,.32);

  /* ---- Paper / ink text (warm-cool bone neutrals) ---- */
  --paper:  #f0f5f8;   /* display headings */
  --body:   #bfd0dd;   /* body copy */
  --dim:    #89a1b5;   /* secondary */
  --mute:   #61798c;   /* faint / captions */
  --on-brass:#1a1206;

  /* ---- Brass — THE brand accent (rationed) ---- */
  --brass:       #d99f52;
  --brass-bright:#eec079;
  --brass-deep:  #b47f33;
  --brass-wash:  rgba(217,159,82,.10);
  --brass-hair:  rgba(217,159,82,.30);

  /* ---- Instrument cyan — data numerics only ---- */
  --cyan:    #54c0da;
  --cyan-dim:#3c9bb4;

  /* ---- Verdict / status (color + glyph + label only) ---- */
  --go:      #3ec08c;  --go-bg:  rgba(62,192,140,.13);  --go-line:  rgba(62,192,140,.42);
  --caution: #f0b53f;  --caution-bg: rgba(240,181,63,.13); --caution-line: rgba(240,181,63,.42);
  --marginal:#ec8a3e;  --marginal-bg:rgba(236,138,62,.13); --marginal-line:rgba(236,138,62,.42);
  --nogo:    #e35560;  --nogo-bg:rgba(227,85,96,.13);   --nogo-line:rgba(227,85,96,.44);
  --divert:  #d23f77;  --divert-bg:rgba(210,63,119,.14);--divert-line:rgba(210,63,119,.46);

  /* ---- Verdict, deepened for text on the light --tan surface (same hues,
     darkened for contrast — mirrors --brass → --brass-deep) ---- */
  --go-deep:      #1f8a5c;
  --caution-deep: #a6720c;
  --marginal-deep:#b3591b;
  --nogo-deep:    #b3232f;
  --divert-deep:  #9c1f52;

  /* ---- Type ---- */
  --serif: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --sans:  'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'Source Code Pro', 'SF Mono', Menlo, monospace;

  /* ---- Radii — editorial/instrument: restrained ---- */
  --r-xs: 4px;
  --r:    8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation & glows ---- */
  --shadow:    0 14px 44px -16px rgba(0,4,14,.7);
  --shadow-lg: 0 34px 90px -28px rgba(0,4,16,.82);
  --glow-brass:0 0 70px -14px rgba(217,159,82,.42);
  --inset-hi:  inset 0 1px 0 rgba(255,255,255,.05);

  /* ---- Rhythm ---- */
  --sec-pad: clamp(4.5rem, 9vw, 8.5rem);
  --wrap:    1200px;
  --wrap-narrow: 820px;

  /* ---- Light "tan" section canvas — alternates with the dark ink canvas
     on .sec-tan sections. Ported from website-improved (v1) .paper. ---- */
  --tan:        #f1ece1;
  --tan-2:      #e9e2d2;
  --tan-text:   #212933;
  --tan-dim:    #5a6473;
  --tan-border: rgba(33,41,51,.16);
  --tan-rule:   rgba(33,41,51,.30);
  --tan-grid:   rgba(33,41,51,.055);
}