/* ============================================================
   Powermieter — Design Tokens
   Extracted from the original Powermieter design system
   (Hanken Grotesk / Schibsted Grotesk / Geist Mono · navy + cyan).
   :root = light (onboarding default) · [data-theme="dark"] = brand navy.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Schibsted+Grotesk:wght@500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Accent (cyan) ramp */
  --accent-50:  #ECFEFF;
  --accent-100: #CFFAFE;
  --accent-200: #A5EEFB;
  --accent-300: #67E0F2;
  --accent-400: #22D3EE;
  --accent-500: #0FB8D6;
  --accent-600: #0E97B4;
  --accent-700: #0F7689;

  /* Navy ramp */
  --navy-600: #1E3149;
  --navy-700: #16243C;
  --navy-800: #0F1A2E;
  --navy-900: #0A1220;

  /* Positive (green) */
  --positive-50:  #ECFDF5;
  --positive-100: #D1FAE9;
  --positive-400: #34D39A;
  --positive-500: #14B981;
  --positive-600: #0E9C6C;

  /* Warn (amber) */
  --warn-50:  #FFF8EB;
  --warn-200: #FCE3AE;
  --warn-500: #E6A23C;
  --warn-700: #9A6516;

  /* ---- Light theme (default) ---- */
  --bg: #EBEFF4;
  --bg-grad-a: #EEF2F7;
  --bg-grad-b: #E4E9F0;
  --surface: #FFFFFF;
  --surface-2: #F5F8FB;
  --surface-3: #EDF2F7;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0F1A2E;
  --text-2: #4A5A70;
  --text-3: #6B819E;
  --text-on-navy: #EAF1F8;

  --accent: var(--accent-600);
  --accent-line: var(--accent-400);
  --accent-tint: var(--accent-50);
  --accent-tint-border: var(--accent-200);
  --positive: var(--positive-600);
  --positive-tint: var(--positive-50);
  --ring: var(--accent-400);

  --btn-primary-bg: var(--navy-800);
  --btn-primary-bg-hover: var(--navy-700);
  --btn-primary-ink: #FFFFFF;

  /* Typography */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Schibsted Grotesk', var(--font-sans);
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Spacing rhythm for controls */
  --pad-x: 20px;
  --pad-y: 13px;

  /* Motion + shadow */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow-color: 218 35% 18%;
  --shadow-sm: 0 1px 2px #00000026;
  --shadow-md: 0 8px 22px -8px #0b1a3322, 0 2px 6px -2px #0b1a3318;
  --shadow-lg: 0 28px 56px -18px #0b1a3333, 0 10px 24px -10px #0b1a331f;
  --shadow-pop: 0 18px 40px -12px hsl(var(--shadow-color) / .22);
}

[data-theme="dark"] {
  --bg: #070D17;
  --bg-grad-a: #0A1322;
  --bg-grad-b: #060B14;
  --surface: #0F1A2C;
  --surface-2: #13213A;
  --surface-3: #1A2B46;
  --border: #21354F;
  --border-strong: #2E456180;
  --text: #EAF1F8;
  --text-2: #A6B8D0;
  --text-3: #8493A8;

  --accent: var(--accent-400);
  --accent-tint: #0C2A36;
  --accent-tint-border: #155A6B;
  --positive: var(--positive-400);
  --positive-tint: #0C2A24;

  --btn-primary-bg: var(--accent-400);
  --btn-primary-bg-hover: var(--accent-300);
  --btn-primary-ink: #04222A;

  --shadow-md: 0 8px 22px -8px #00000066, 0 2px 6px -2px #00000055;
  --shadow-lg: 0 28px 56px -18px #000000aa, 0 10px 24px -10px #00000077;
  --shadow-pop: 0 22px 48px -14px #000000bb;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--bg-grad-a), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}