/* ============================================================
   AccuWeather Design System — Colors & Type
   Source: Figma "Sola - DSM" + uploaded brand kit
   ============================================================ */

/* ---- Fonts --------------------------------------------------- */
@font-face {
  font-family: "Solis";
  src: url("./fonts/Solis-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Solis";
  src: url("./fonts/Solis-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Solis";
  src: url("./fonts/Solis-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Solis";
  src: url("./fonts/Solis-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Solis";
  src: url("./fonts/Solis-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Solis";
  src: url("./fonts/Solis-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ============ TYPE ============ */
  --font-sans: "Solis", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Production weights (per Typography/Typeface: only Regular + Bold) */
  --fw-regular: 400;
  --fw-bold: 700;
  /* Display weights (used sparingly in marketing/display frames) */
  --fw-medium: 500;
  --fw-light: 300;

  /* Type scale (pulled from Figma frame sizes) */
  --fs-display-xxl: 180px;  /* brand hero moments */
  --fs-display-xl:  100px;  /* section headers on Style pages */
  --fs-display-l:   72px;
  --fs-display-m:   51px;   /* sub-section header */
  --fs-display-s:   40px;
  --fs-h1:          24px;
  --fs-h2:          18px;
  --fs-body:        16px;   /* default body (773× in Figma) */
  --fs-label:       14px;
  --fs-caption:     12px;

  /* Line heights */
  --lh-tight: 1;          /* numerals / display */
  --lh-header: 1.2;
  --lh-body: 1.3;
  --lh-prose: 1.5;

  /* Tracking */
  --ls-display: -0.010em; /* -0.425px @ 51px etc. */
  --ls-label: 0.5px;      /* uppercase meta labels */

  /* ============ SURFACES ============ */
  --bg-dark:    #131415;  /* Dark Mode Sheet */
  --bg-light:   #E4EAF2;  /* Light Mode Sheet */
  --fg-on-dark: #FFFFFF;
  --fg-on-light:#000000;

  /* Card surfaces: 5% white opacity on dark, 100% white on light sheet */
  --card-dark:  rgba(255,255,255,0.05);
  --card-light: #FFFFFF;
  --card-border-dark:  rgba(255,255,255,0.10);
  --card-border-light: rgba(0,0,0,0.10);

  /* ============ FOREGROUND TEXT ============ */
  --fg1-dark: rgba(255,255,255,1.00);
  --fg2-dark: rgba(255,255,255,0.60);   /* meta / label */
  --fg3-dark: rgba(255,255,255,0.38);   /* muted */

  --fg1-light: rgba(0,0,0,1.00);
  --fg2-light: rgba(0,0,0,0.60);
  --fg3-light: rgba(0,0,0,0.38);

  /* ============ BRAND ============ */
  --aw-orange:        #F05514; /* primary sun / brand accent */
  --aw-orange-bright: #FF9001;
  --aw-orange-warm:   #F79A20;
  --aw-yellow:        #FFD701;
  --aw-yellow-warm:   #FFBF29;
  --aw-yellow-pale:   #FFE475;

  /* ============ UI BUTTONS / INTERFACE ============ */
  --btn-primary-bg:    #F05514;
  --btn-primary-fg:    #FFFFFF;
  --btn-neutral-bg:    #333A42;
  --btn-neutral-fg:    #FFFFFF;
  --btn-danger-bg:     #BA0808;

  /* Interface grays (Interface frame "Gray" row) */
  --gray-900: #131415;
  --gray-800: #333A42;
  --gray-700: #666C72;
  --gray-500: #757575;
  --gray-400: #B7B7B7;
  --gray-300: #C6C6C6;
  --gray-200: #D9D9D9;
  --gray-100: #F1F4F8;

  /* ============ CONDITIONS (weather semantic colors) ============ */
  /* Rain: pale → saturated */
  --cond-rain-1:  #E8ECE1;
  --cond-rain-2:  #D5E3BD;
  --cond-rain-3:  #BFD97B;
  --cond-rain-4:  #93C701;
  --cond-rain-5:  #589600; /* deepest */

  /* Snow (blue family) */
  --cond-snow-1:  #E4EAF2;
  --cond-snow-2:  #B5D3F2;
  --cond-snow-3:  #599BE3;
  --cond-snow-4:  #154BEA;
  --cond-snow-5:  #0865DF;

  /* Ice (pink / warm rose) */
  --cond-ice-1:  #ECDEDE;
  --cond-ice-2:  #EAD0D9;
  --cond-ice-3:  #E6A5C8;
  --cond-ice-4:  #FF69B4;

  /* Severe (warning yellow → red) */
  --cond-severe-1: #FFF200;
  --cond-severe-2: #FFBF29;
  --cond-severe-3: #F79A20;
  --cond-severe-4: #CE2027;
  --cond-severe-5: #AB0808;

  /* Drought */
  --cond-drought: #FDDD7C;

  /* Wind (purple) */
  --cond-wind-1: #E2D5DF;
  --cond-wind-2: #BC94D5;
  --cond-wind-3: #6754E0;
  --cond-wind-4: #472966;

  /* Smoke (warm earth) */
  --cond-smoke-1: #EBD9CA;
  --cond-smoke-2: #C18C37;

  /* ============ INDEXES ============ */
  --idx-aq-good:   #1E8C68;
  --idx-aq-mod:    #FFBF29;
  --idx-aq-unh:    #F05514;
  --idx-aq-vunh:   #A73223;
  --idx-aq-haz:    #811518;
  --idx-uv:        #1DCFFF;
  --idx-pollen:    #549D44;
  --idx-allergy:   #6B2C90;

  /* Seasonal */
  --season-winter: #0E186C;
  --season-spring: #7FD7A3;
  --season-summer: #F3C128;
  --season-fall:   #AC0696;

  /* Tropical / Hurricane */
  --tropical-red: #BE2B1F;

  /* ============ ALERTS (Interface/Alerts row) ============ */
  --alert-info:    #0865DF;
  --alert-warning: #F05514;
  --alert-danger:  #BA0808;

  /* ============ SPACING (from /Spacing page) ============ */
  --space-hair:  1px;
  --space-xxs:   2px;
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-default: 16px;
  --space-lg:    20px;
  --space-xl:    24px;
  --space-xxl:   48px;

  /* ============ RADIUS ============ */
  --radius: 6px;              /* house default */
  --radius-sm: 4px;
  --radius-pill: 999px;

  /* ============ ELEVATION / SHADOW ============ */
  --shadow-sheet: 0 4px 24px rgba(0,0,0,0.25);
  --shadow-card:  0 2px 8px rgba(0,0,0,0.15);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.06);

  /* ============ GRADIENTS ============ */
  --grad-sun:       radial-gradient(circle, #F5BE6B 19%, #FFB029 53%, #FF9000 78%);
  --grad-warm-ray:  linear-gradient(#FFE475 17%, #FFBF29 80%);
  --grad-sky-day:   linear-gradient(180deg, #5ECFFF 0%, #10AFFF 60%, #0865DF 100%);
  --grad-sky-night: linear-gradient(180deg, #0E186C 0%, #131415 100%);

  /* ============ SEMANTIC TOKENS (resolved for dark UI, the primary surface) ============ */
  --bg:       var(--bg-dark);
  --fg:       var(--fg-on-dark);
  --fg-muted: var(--fg2-dark);
  --fg-subtle:var(--fg3-dark);
  --surface:  var(--card-dark);
  --border:   var(--card-border-dark);
}

/* Light mode scope */
[data-theme="light"], .theme-light {
  --bg:       var(--bg-light);
  --fg:       var(--fg-on-light);
  --fg-muted: var(--fg2-light);
  --fg-subtle:var(--fg3-light);
  --surface:  var(--card-light);
  --border:   var(--card-border-light);
}

/* ============================================================
   Semantic type recipes
   ============================================================ */
html, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.display-xxl { font: var(--fw-medium) var(--fs-display-xxl)/var(--lh-header) var(--font-sans); letter-spacing: var(--ls-display); }
.display-xl  { font: var(--fw-medium) var(--fs-display-xl)/var(--lh-header)  var(--font-sans); letter-spacing: var(--ls-display); }
.display-l   { font: var(--fw-regular) var(--fs-display-l)/var(--lh-tight)   var(--font-sans); }
.display-m   { font: var(--fw-medium) var(--fs-display-m)/var(--lh-header)   var(--font-sans); letter-spacing: var(--ls-display); }
.display-s   { font: var(--fw-regular) var(--fs-display-s)/var(--lh-tight)   var(--font-sans); }

h1, .h1   { font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-sans); letter-spacing: var(--ls-display); margin:0; }
h2, .h2   { font: var(--fw-bold) var(--fs-h2)/var(--lh-header) var(--font-sans); margin:0; }
p,  .body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); margin:0; }
.label    { font: var(--fw-bold) var(--fs-caption)/1.16 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; }
.meta     { font: var(--fw-regular) var(--fs-label)/var(--lh-body) var(--font-sans); color: var(--fg-muted); }
.mono     { font: var(--fw-light) var(--fs-h1)/var(--lh-body) var(--font-mono); }

/* ============================================================
   Card recipe — header / body / optional footer, 6px radius
   ============================================================ */
.aw-card {
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px; /* hair divider between rows */
}
.aw-card__header,
.aw-card__body,
.aw-card__footer {
  background: var(--surface);
  padding: 16px 20px;
}
.aw-card__header {
  display: flex; align-items: center; justify-content: space-between;
  font: var(--fw-bold) var(--fs-caption)/1.16 var(--font-sans);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-muted);
}
.aw-card__header > .time { color: var(--fg); }
.aw-card__body { padding: 16px 20px; }
.aw-card__footer { padding: 12px 20px; color: var(--fg-muted); font-size: var(--fs-caption); }