/* Fonts are loaded by the page with <link> (faster than @import). */
/* LemWeather components. Plain CSS classes, prefix lw-. Every value is a token. */
.lw-root { font-family: var(--font-sans); color: var(--ink); background: var(--surface-000); }

/* Button */
.lw-btn { display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0 var(--space-5);
  border-radius:var(--radius-md); border:1px solid transparent; font:600 15px/1 var(--font-sans); cursor:pointer;
  text-decoration:none; white-space:nowrap; }
.lw-btn:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.lw-btn--primary { background:var(--brand); color:var(--on-brand); }
.lw-btn--signal { background:var(--signal); color:var(--on-signal); }
.lw-btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.lw-btn--sm { min-height:32px; padding:0 var(--space-3); font-size:13px; }
.lw-btn:hover { filter:brightness(1.08); }
.lw-btn--ghost:hover { background:var(--surface-200); filter:none; }

/* Chip (layer toggles) */
.lw-chip { display:inline-flex; align-items:center; gap:var(--space-2); min-height:32px; padding:0 var(--space-3);
  border-radius:var(--radius-pill); border:1px solid var(--line-strong); background:var(--surface-100); color:var(--ink);
  font:600 13px/1 var(--font-sans); cursor:pointer; }
.lw-chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.lw-chip:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Category badge */
.lw-cat { display:inline-flex; align-items:center; gap:var(--space-1); padding:3px var(--space-2); border-radius:var(--radius-sm);
  font:700 12px/16px var(--font-sans); letter-spacing:.04em; text-transform:uppercase; }
.lw-cat--td { background:var(--cat-td); color:var(--ink-on-cat); }
.lw-cat--ts { background:var(--cat-ts); color:var(--ink-on-cat); }
.lw-cat--1 { background:var(--cat-1); color:var(--ink-on-cat); }
.lw-cat--2 { background:var(--cat-2); color:var(--ink-on-cat); }
.lw-cat--3 { background:var(--cat-3); color:var(--white-on-cat); }
.lw-cat--4 { background:var(--cat-4); color:var(--white-on-cat); }
.lw-cat--5 { background:var(--cat-5); color:var(--white-on-cat); }

/* Card + storm card */
.lw-card { color:var(--ink); background:var(--surface-100); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:var(--space-5); }
.lw-storm { display:grid; gap:var(--space-4); }
.lw-storm__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.lw-storm__name { margin:0; color:var(--ink); font:750 26px/30px var(--font-display); letter-spacing:-.01em; }
.lw-storm__meta { margin:0; font:400 14px/20px var(--font-sans); color:var(--ink-muted); }
.lw-readouts { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:var(--space-2); }
.lw-readout { background:var(--surface-200); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); }
.lw-readout__label { display:block; font:650 12px/16px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.lw-readout__value { display:block; font:500 22px/28px var(--font-mono); color:var(--ink); }
.lw-readout__unit { font-size:13px; color:var(--ink-muted); margin-left:2px; }
.lw-links { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.lw-link { color:var(--brand); font:600 14px/20px var(--font-sans); text-underline-offset:3px; }

/* Alert banner */
.lw-alert { display:grid; grid-template-columns:auto 1fr; gap:var(--space-1) var(--space-3); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-md); border:1px solid var(--line); color:var(--ink); }
.lw-alert--warning { background:var(--warning-soft); border-color:var(--warning); }
.lw-alert--watch { background:var(--watch-soft); border-color:var(--watch); }
.lw-alert--info { background:var(--surface-200); }
.lw-alert__level { grid-row:span 2; align-self:start; font:700 12px/16px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; padding:3px var(--space-2); border-radius:var(--radius-sm); }
.lw-alert--warning .lw-alert__level { background:var(--warning); color:var(--surface-100); }
.lw-alert--watch .lw-alert__level { background:var(--watch); color:var(--surface-100); }
.lw-alert--info .lw-alert__level { background:var(--ink-muted); color:var(--surface-100); }
.lw-alert__title { margin:0; font:700 15px/20px var(--font-sans); }
.lw-alert__area { margin:0; font:400 14px/20px var(--font-sans); color:var(--ink-muted); }

/* Claim CTA */
.lw-cta { display:grid; gap:var(--space-3); padding:var(--space-5); border-radius:var(--radius-lg); background:var(--brand-soft); color:var(--ink); }
.lw-cta__kicker { margin:0; font:650 12px/16px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--brand); }
.lw-cta__title { margin:0; font:750 24px/30px var(--font-display); letter-spacing:-.01em; }
.lw-cta__body { margin:0; font:400 15px/22px var(--font-sans); }
.lw-cta__row { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.lw-cta__fine { margin:0; font:400 12px/16px var(--font-sans); color:var(--ink-muted); }

/* Live dot */
.lw-live { display:inline-flex; align-items:center; gap:var(--space-2); font:650 12px/16px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--signal); }
.lw-live::before { content:""; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--signal); }

/* Night frame for imagery */
.lw-frame { background:var(--night); color:var(--night-ink); border-radius:var(--radius-lg); overflow:hidden; }
.lw-frame img { display:block; width:100%; height:auto; }
.lw-frame__cap { margin:0; padding:var(--space-2) var(--space-3); font:400 13px/18px var(--font-sans); color:var(--night-ink); }