/* v1.25.0 — Global Design System Phase 1: canonical tokens + reset only.
 * OWNER: design tokens, reset, base typography, viewport containment.
 * COMPONENTS DO NOT BELONG HERE. */
:root{
  color-scheme:light;

  /* Layout */
  --container:1200px;
  --container-wide:1200px;
  --content-wide:960px;
  --content-copy:760px;
  --reading-measure:720px;
  --page-pad:24px;
  --header-height:72px;
  --header-height-mobile:60px;
  --touch:44px;
  --control:46px;
  --control-lg:52px;

  /* 4px spacing scale */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;
  --space-12:96px;

  /* Radius: restrained, never the visual hierarchy itself */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-round:999px;
  --radius-control:var(--radius-md);
  --radius-card:var(--radius-lg);
  --radius-dialog:var(--radius-xl);

  /* Brand. #00af16 is the identity color; stronger green is used behind white text for contrast. */
  --brand:#00af16;
  --brand-strong:#087f18;
  --brand-deep:#066b14;
  --brand-soft:#effaf1;
  --brand-muted:#e3f5e6;
  --brand-line:#bfe8c5;
  --primary:var(--brand);
  --primary-dark:var(--brand-strong);
  --primary-soft:var(--brand-soft);
  --primary-line:var(--brand-line);
  --primary-action:var(--brand-strong);
  --primary-action-hover:var(--brand-deep);
  --on-brand:#ffffff;

  /* Neutral surfaces */
  --surface-page:#f7f9f7;
  --surface:#ffffff;
  --surface-soft:#fafcfb;
  --surface-muted:#eef3ef;
  --surface-hover:#f2f8f3;
  --surface-info:#f0f9f1;
  --footer-surface:#f2f5f2;

  /* Text */
  --heading:#17231c;
  --text:#2b3a32;
  --text-2:#4c5f54;
  --muted:#687a70;
  --link:#087f18;
  --link-hover:#066b14;

  /* Lines */
  --border:#dde6df;
  --border-strong:#c8d6cb;
  --line:#e9eeea;

  /* Semantic states */
  --success:#147458;
  --success-soft:#edf8f4;
  --warning:#805b14;
  --warning-soft:#fff8e8;
  --warning-line:#e8d49d;
  --danger:#9d3b3b;
  --danger-soft:#fff3f3;
  --danger-line:#e5b8b8;
  --danger-focus:rgba(157,59,59,.16);
  --rain:#2d78a8;
  --wind:#617083;
  --uv:#9a6500;
  --aqi:#6a637c;

  /* Photo / weather hero legacy aliases. Homepage owner will be rebuilt in Phase 1D. */
  --hero:#214c36;
  --hero-deep:#163426;
  --hero-text:#f8fcf9;
  --hero-muted:#dcebe0;
  --hero-line:rgba(255,255,255,.22);
  --hero-glass:rgba(18,52,38,.68);
  --photo-overlay:rgba(13,37,27,.58);

  /* Typography */
  --font-family:"Segoe UI",Arial,Tahoma,sans-serif;
  --font-caption:13px;
  --font-xs:var(--font-caption);
  --font-sm:14px;
  --font-ui-compact:15px;
  --font-body:16px;
  --font-ui-title:17px;
  --font-lead:18px;
  --font-h4:18px;
  --font-h3:21px;
  --font-h2:30px;
  --font-h1:48px;
  --font-data-sm:20px;
  --font-data-md:28px;
  --font-data-lg:40px;
  --font-weather:64px;
  --line-tight:1.14;
  --line-heading:1.2;
  --line-body:1.6;
  --weight-regular:400;
  --weight-medium:600;
  --weight-bold:700;

  /* Elevation stays quiet */
  --shadow-xs:0 1px 2px rgba(23,35,28,.045);
  --shadow-sm:0 8px 22px rgba(23,35,28,.07);
  --shadow-md:0 18px 42px rgba(23,35,28,.11);
  --focus:rgba(0,175,22,.18);
  --disabled-opacity:.58;
  --transition-fast:120ms ease;
  --transition:160ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{width:100%;min-width:0;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--space-4));-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;min-width:0;margin:0;background:var(--surface-page);color:var(--text);font-family:var(--font-family);font-size:var(--font-body);font-weight:var(--weight-regular);line-height:var(--line-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{display:block;min-width:0}
h1,h2,h3,h4,h5,h6{min-width:0;margin:0;color:var(--heading);font-family:var(--font-family);font-weight:var(--weight-bold);letter-spacing:-.025em;line-height:var(--line-heading);text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:var(--font-h1);line-height:var(--line-tight)}
h2{font-size:var(--font-h2)}
h3{font-size:var(--font-h3)}
h4{font-size:var(--font-h4)}
p{margin:0 0 var(--space-4)}
ul,ol{margin-top:0}
a{color:inherit;text-decoration:none}
img,picture,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
:where(button,input,select,textarea){font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
:where(input,select,textarea){min-width:0}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none!important}
:target{scroll-margin-top:calc(var(--header-height) + var(--space-5))}
::selection{background:var(--brand-muted);color:var(--heading)}

/* Stable data typography primitives. */
.weather-value,.data-value,.metric-value{color:var(--heading);font-variant-numeric:tabular-nums;font-weight:var(--weight-bold);letter-spacing:-.035em;line-height:1}
.weather-value{font-size:var(--font-weather)}
.data-value{font-size:var(--font-data-md)}
.metric-value{font-size:var(--font-data-sm)}

@media(max-width:1024px){:root{--page-pad:20px}}
@media(max-width:768px){:root{--page-pad:16px;--font-h1:40px;--font-h2:27px;--font-weather:56px}html{scroll-padding-top:calc(var(--header-height-mobile) + var(--space-3))}}
@media(max-width:430px){:root{--page-pad:14px;--font-h1:34px;--font-h2:25px;--font-h3:20px;--font-weather:52px}}
@media(max-width:360px){:root{--page-pad:12px;--font-h1:32px;--font-h2:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}