/* The site look: the navy and orange brand (the Instagram posts, share
   images and link previews; colors also in brand-theme.js). Loaded after
   styles.css. Rules sit on :root[data-brand] (set on <html> in index.html)
   so they outrank styles.css, including its dark-mode tokens. The first
   block maps the tokens onto the components; the second sets the brand. */

:root[data-brand] {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-display);
  --font-label: var(--font-body);
  --display-weight: 700;
  --display-case: none;
  --display-spacing: -0.01em;
  --label-spacing: 0.06em;
  --r-sm: 8px;
  --r-pill: 999px;
  --btn-border: 1px solid var(--border);
  --btn-shadow: none;
  --on-accent: #fff;
}

/* One palette, so no light/dark toggle. */
:root[data-brand] #themeToggle { display: none; }

:root[data-brand] body {
  font-family: var(--font-body);
  background: var(--bg);
}
:root[data-brand] button,
:root[data-brand] input,
:root[data-brand] select,
:root[data-brand] textarea { font-family: inherit; }

:root[data-brand] .header-left h1,
:root[data-brand] .header-left .site-title,
:root[data-brand] .rp-name,
:root[data-brand] .about h2,
:root[data-brand] .modal-header h2,
:root[data-brand] .auth-title,
:root[data-brand] .empty-state h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-spacing);
}

:root[data-brand] .resort-name,
:root[data-brand] .rp-section-title,
:root[data-brand] .about h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-spacing);
}

:root[data-brand] .stat-value,
:root[data-brand] .season-value,
:root[data-brand] .current-temp,
:root[data-brand] .daily-amount,
:root[data-brand] .rp-facts dd,
:root[data-brand] .rp-table td,
:root[data-brand] .board-table .board-num {
  font-family: var(--font-num);
}

:root[data-brand] .stat-label,
:root[data-brand] .season-label,
:root[data-brand] .rp-facts dt,
:root[data-brand] .rp-table thead th,
:root[data-brand] .board-table th,
:root[data-brand] .badge {
  font-family: var(--font-label);
  letter-spacing: var(--label-spacing);
}

:root[data-brand] .btn,
:root[data-brand] .snow-btn,
:root[data-brand] .board-tab,
:root[data-brand] .board-sort,
:root[data-brand] .small-btn,
:root[data-brand] .pa-tab,
:root[data-brand] .unit-toggle,
:root[data-brand] .unit-btn {
  font-family: var(--font-label);
}

:root[data-brand] .btn,
:root[data-brand] .small-btn,
:root[data-brand] .stat-tile,
:root[data-brand] .current-row,
:root[data-brand] .season-banner,
:root[data-brand] .unit-toggle,
:root[data-brand] .alert-inputs input,
:root[data-brand] .alert-inputs select,
:root[data-brand] .board-region select,
:root[data-brand] .form-row input,
:root[data-brand] .form-row select,
:root[data-brand] .form-row textarea {
  border-radius: var(--r-sm);
}
:root[data-brand] .unit-btn { border-radius: calc(var(--r-sm) * 0.7); }

:root[data-brand] .badge,
:root[data-brand] .board-tab,
:root[data-brand] .board-sort,
:root[data-brand] .pa-tab,
:root[data-brand] .pa-status,
:root[data-brand] .snow-btn,
:root[data-brand] .daily-bar-track,
:root[data-brand] .daily-bar-fill {
  border-radius: var(--r-pill);
}

:root[data-brand] .btn { box-shadow: var(--btn-shadow); }
:root[data-brand] .btn-ghost { border: var(--btn-border); }
:root[data-brand] .btn-primary { color: var(--on-accent); }
:root[data-brand] .board-tab.active,
:root[data-brand] .board-sort.active { color: var(--on-accent); }

/* A plain "Where's the snow?" button: the accent color, no gradient. */
:root[data-brand] .snow-btn {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--btn-shadow);
}
:root[data-brand] .snow-btn-flakes i { color: currentColor; opacity: 0.55; }
:root[data-brand] .snow-btn-flakes i:empty { background: currentColor; }

/* Calendar ramp follows each look's snow color. */
:root[data-brand] .cal {
  /* Ice for light days, orange for deep ones (orange tints on navy turn brown). */
  --cal-1: rgba(234, 242, 247, 0.08);
  --cal-2: rgba(234, 242, 247, 0.18);
  --cal-3: rgba(234, 242, 247, 0.32);
  --cal-4: #FF9A4D;
  --cal-5: var(--fresh);
}
/* Forecast vs. what fell: what fell is ice; the three forecast leads. */
:root[data-brand] .fva { --fva-1: #FF7A1A; --fva-3: #FFC857; --fva-7: #6FA3D0; }
:root[data-brand] .cal-day.s4,
:root[data-brand] .cal-day.s5 { color: var(--bg-elevated); }

/* A logo in place of the cloud icon, drawn by each look as --logo. */
:root[data-brand] .brand-icon { display: var(--logo-icon, inline-block); }
:root[data-brand] .brand::before {
  content: "";
  display: var(--logo-display, none);
  flex-shrink: 0;
  width: var(--logo-w, 32px);
  height: var(--logo-h, 32px);
  background: var(--logo) center / contain no-repeat;
}


/* ---------- Brand: navy and orange, condensed poster numbers, mono labels, the snow-stake mark ---------- */

:root[data-brand] {
  --bg: #0B1B2B;
  --bg-elevated: #0F2336;
  --bg-subtle: #142C43;
  --text: #EAF2F7;
  --text-muted: #9FB3C4;
  --border: #2A3E52;
  --accent: #FF7A1A;
  --accent-strong: #FF9A4D;
  --accent-soft: rgba(255, 122, 26, 0.14);
  --epic-color: #C9D7E2;
  --epic-bg: transparent;
  --ikon-color: #FFB27A;
  --ikon-bg: transparent;
  --other-color: #9FB3C4;
  --other-bg: transparent;
  --custom-color: #9FB3C4;
  --custom-bg: transparent;
  --fresh: #FF7A1A;
  --fresh-bg: rgba(255, 122, 26, 0.06);
  --star: #FFC857;
  --shadow: none;
  --radius: 3px;
  --r-sm: 2px;
  --r-pill: 2px;
  --on-accent: #0B1B2B;
  --font-body: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display-weight: 900;
  --display-case: uppercase;
  --display-spacing: 0.02em;
  --label-spacing: 0.08em;
  --logo-icon: none;
  --logo-display: block;
  --logo-w: 46px;
  --logo-h: 33px;
  --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 40 184 132'%3E%3Cpath d='M14 156 L74 58 L100 98 L122 70 L186 156 Z' fill='%23EAF2F7'/%3E%3Cpath d='M74 58 L60 81 L68 77 L75 85 L83 76 L88 80 Z' fill='%230B1B2B' fill-opacity='0.18'/%3E%3Crect x='136' y='44' width='11' height='104' rx='2' fill='%23FF7A1A'/%3E%3Cpath d='M147 56h10v4h-10zM147 76h10v4h-10zM147 96h10v4h-10zM147 116h10v4h-10z' fill='%23FF7A1A'/%3E%3Cpath d='M8 150 C 50 132, 90 140, 120 134 C 150 128, 175 136, 192 146 L 192 170 L 8 170 Z' fill='%23EAF2F7'/%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-brand] body { font-size: 14px; }
:root[data-brand] .header-left h1,
:root[data-brand] .header-left .site-title { font-size: 40px; line-height: 0.9; }
:root[data-brand] .brand { align-items: flex-end; gap: 12px; }
:root[data-brand] .subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; }
:root[data-brand] .app-header { border-bottom: 1px solid var(--border); margin-bottom: 24px; }
:root[data-brand] .resort-card { border-top: 3px solid var(--accent); }
:root[data-brand] .resort-name { font-size: 26px; line-height: 1; }
:root[data-brand] .rp-name { font-size: 44px; line-height: 0.95; }
:root[data-brand] .badge { border: 1px solid currentColor; padding: 2px 6px; }
:root[data-brand] .stat-tile { background: transparent; border: 1px solid var(--border); }
:root[data-brand] .stat-tile.has-snow { background: var(--fresh-bg); border-color: rgba(255, 122, 26, 0.45); }
:root[data-brand] .stat-value,
:root[data-brand] .season-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: 0.01em; }
:root[data-brand] .current-temp { font-family: var(--font-display); font-weight: 800; font-size: 30px; }
:root[data-brand] .season-banner { background: transparent; border: 1px solid var(--border); }
:root[data-brand] .season-label { color: var(--text-muted); }
:root[data-brand] .season-value { color: var(--text); font-size: 22px; }
:root[data-brand] .past-banner { background: transparent; }
:root[data-brand] .current-row { background: transparent; border: 1px solid var(--border); }
:root[data-brand] .weather-icon { color: var(--text-muted); }
:root[data-brand] .btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
:root[data-brand] .snow-btn { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
:root[data-brand] .board-table td.board-num.sorted { font-family: var(--font-display); font-size: 22px; font-weight: 800; }
:root[data-brand] .board-bar { border-radius: 0; height: 3px; }
:root[data-brand] .about h2 { font-size: 26px; }
:root[data-brand] .about h3 { font-size: 17px; }


@media (max-width: 560px) {
  :root[data-brand] .header-left h1,
  :root[data-brand] .header-left .site-title { font-size: 34px; }
}

/* Mono numbers run wider than the old font: keep "23.1 in" on one line. */
:root[data-brand] .daily-amount { width: 64px; white-space: nowrap; }
:root[data-brand] .daily-temps { width: 84px; }

/* Square corners and poster numbers in the calendar and forecast-vs-fell. */
:root[data-brand] .cal-day,
:root[data-brand] .cal-form,
:root[data-brand] .cal-note,
:root[data-brand] .fva-tile { border-radius: var(--r-sm); }
:root[data-brand] .cal-swatch { border-radius: 1px; }
:root[data-brand] .fva-tile-value { font-family: var(--font-display); font-weight: 800; font-size: 28px; }

/* Plain links (no class of their own) in orange instead of browser blue.
   :where() keeps this from outranking any component's own link color. */
:where(:root[data-brand]) a { color: var(--accent); }