/*
  ┌───────────────────────────────────────────────────────────────────────────────────────────┐
  │  SHARED APPEARANCE LAYER — single source of the MOSS design tokens and base primitives.      │
  │  This file is the extraction seam for `moss-shared` (see docs/shared-library.md). When the   │
  │  shared library is created, this file moves there UNCHANGED and every MOSS app (account,     │
  │  Forecast web, and the Windows app at compile time) imports it, so the look never drifts.    │
  │  Nothing account-hub-specific belongs here — hub styles live in ../styles.css.               │
  └───────────────────────────────────────────────────────────────────────────────────────────┘

  These are the SAME token names and values as Forecast by MOSS, so every MOSS app renders
  identically ("shouldn't feel like an app from a different planet"). The global appearance
  preference lives in the account service, so this is the source of truth for the tokens; apps
  import the same families. v1 ships the base dark + light schemes and the five colour accents;
  the full theme families (Aurora … Carbon) port over next.
*/
:root {
  --bg: #0b1220;
  --card: #131f36;
  --card2: #182742;
  --line: #243455;
  --text: #e8eefc;
  --muted: #8fa0c2;
  --accent: #5eead4;
  --accent2: #818cf8;
  --onacc: #06101f;
  --gold1: #fbbf24;
  --gold2: #f59e0b;
  --gold-ink: #231a07;
  --gold-border: #d97706;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 18px;
  --radius-sm: 12px;
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
:root[data-scheme='light'] {
  --bg: #f2f5fb;
  --card: #ffffff;
  --card2: #eef2fb;
  --line: #d7deee;
  --text: #13203a;
  --muted: #5a6b8c;
  --accent: #0d9488;
  --accent2: #4f46e5;
  --onacc: #ffffff;
  color-scheme: light;
}
:root[data-colour='sunset'] {
  --accent: #fb923c;
  --accent2: #f472b6;
}
:root[data-colour='forest'] {
  --accent: #4ade80;
  --accent2: #2dd4bf;
}
:root[data-colour='violet'] {
  --accent: #c4b5fd;
  --accent2: #e879f9;
}
:root[data-colour='slate'] {
  --accent: #cbd5e1;
  --accent2: #94a3b8;
}
:root[data-scheme='light'][data-colour='sunset'] {
  --accent: #ea580c;
  --accent2: #db2777;
}
:root[data-scheme='light'][data-colour='forest'] {
  --accent: #15803d;
  --accent2: #0f766e;
}
:root[data-scheme='light'][data-colour='violet'] {
  --accent: #7c3aed;
  --accent2: #c026d3;
}
:root[data-scheme='light'][data-colour='slate'] {
  --accent: #475569;
  --accent2: #334155;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Buttons — identical metrics to Forecast (padding 9px 14px, radius 10px, weight 600). */
.btn {
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--text);
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover {
  border-color: var(--accent);
}
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--onacc);
  border: none;
}
.btn.primary:hover {
  filter: brightness(1.07);
}
.btn.gold {
  background: linear-gradient(180deg, var(--gold1), var(--gold2));
  color: var(--gold-ink);
  border: 1px solid var(--gold-border);
  font-weight: 800;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.wrap {
  max-width: 720px;
  margin: 48px auto;
  padding: 0 20px;
}
h1 {
  font-size: 22px;
  margin: 0 0 4px;
}
.muted {
  color: var(--muted);
}