/* Tempor design tokens – gegenereerd. Licht is standaard; donker volgt het systeem of data-theme. */
:root {
  --tp-sky-50: #F5F9FF;
  --tp-sky-100: #E4F3FF;
  --tp-sky-200: #A9DBFF;
  --tp-sky-300: #6EC1FF;
  --tp-sky-500: #3C96E8;
  --tp-sky-600: #1A63CC;
  --tp-sky-700: #1E4F86;
  --tp-amber-100: #FFF1BF;
  --tp-amber-300: #FFD04D;
  --tp-amber-400: #FFC233;
  --tp-amber-500: #FFAA1C;
  --tp-amber-600: #F08A0A;
  --tp-amber-800: #A85A00;
  --tp-coral-400: #FF8A3D;
  --tp-coral-600: #E5502A;
  --tp-coral-700: #C24E0B;
  --tp-navy-700: #1F426E;
  --tp-navy-800: #13325A;
  --tp-navy-900: #0E2D57;
  --tp-navy-950: #0B1F33;
  --tp-neutral-0: #FFFFFF;
  --tp-neutral-100: #EDF1F6;
  --tp-neutral-200: #E3E9EF;
  --tp-neutral-300: #C9D3DD;
  --tp-neutral-500: #6B7F94;
  --tp-neutral-600: #5B7086;
  --tp-neutral-700: #4A6684;
  --tp-background: #F5F9FF;
  --tp-background-subtle: #EAF2FB;
  --tp-surface: #FFFFFF;
  --tp-surface-elevated: #FFFFFF;
  --tp-surface-highlight: #EAF5FF;
  --tp-border: #E3E9EF;
  --tp-divider: #EDF1F6;
  --tp-text-primary: #0E2D57;
  --tp-text-secondary: #4A6684;
  --tp-text-tertiary: #5B7086;
  --tp-text-on-sky: #0E2D57;
  --tp-text-on-sky-secondary: #163A63;
  --tp-primary: #1A63CC;
  --tp-on-primary: #FFFFFF;
  --tp-accent: #FFC233;
  --tp-on-accent: #0E2D57;
  --tp-accent-text: #A85A00;
  --tp-temp-high: #C24E0B;
  --tp-temp-low: #1A63CC;
  --tp-temp-high-on-sky: #8F3605;
  --tp-temp-low-on-sky: #123F86;
  --tp-precipitation: #1A63CC;
  --tp-track: #E8EEF5;
  --tp-focus: #3C96E8;
  --tp-success: #1F7A4D;
  --tp-warning: #A85A00;
  --tp-danger: #B3261E;
  --tp-temp-0: #2457C5; /* -10 °C */
  --tp-temp-1: #3C96E8; /* 0 °C */
  --tp-temp-2: #7FC6F7; /* 8 °C */
  --tp-temp-3: #FFC233; /* 15 °C */
  --tp-temp-4: #FF8A3D; /* 22 °C */
  --tp-temp-5: #E5502A; /* 30 °C */
  --tp-precip-light: #A9D6FA;
  --tp-precip-moderate: #5FA8EC;
  --tp-precip-heavy: #1A63CC;
  --tp-precip-rain-drops: #2F86E0;
  --tp-uv-low: #289500;
  --tp-uv-moderate: #F7E400;
  --tp-uv-high: #F85900;
  --tp-uv-veryhigh: #D8001D;
  --tp-uv-extreme: #6B49C8;
  --tp-sky-day: linear-gradient(180deg, #6EC1FF 0%, #A9DBFF 30%, #E4F3FF 46%, #F5F9FF 56%);
  --tp-sky-overcast: linear-gradient(180deg, #9FB9D6 0%, #C8D8EA 30%, #E6EEF7 46%, #F5F9FF 56%);
  --tp-sky-rain: linear-gradient(180deg, #93ACD2 0%, #BCCDE5 30%, #E1EAF5 46%, #F5F9FF 56%);
  --tp-sky-evening: linear-gradient(180deg, #9DB4E8 0%, #C3CDF0 22%, #F1D9CF 40%, #F7EBE4 48%, #F5F9FF 58%);
  --tp-sky-night: linear-gradient(180deg, #0E2D57 0%, #133A6B 35%, #0B1F33 60%, #0B1F33 100%);
  --tp-temp-bar: linear-gradient(90deg, #3C96E8, #7FC6F7, #FFC233, #FF8A3D);
  --tp-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tp-text-temperature-hero: 400 5.5rem/5.5rem var(--tp-font);
  --tp-tracking-temperature-hero: -0.03em;
  --tp-text-display: 600 2.75rem/3.25rem var(--tp-font);
  --tp-tracking-display: -0.02em;
  --tp-text-title1: 600 2rem/2.5rem var(--tp-font);
  --tp-tracking-title1: -0.015em;
  --tp-text-title2: 600 1.5rem/1.875rem var(--tp-font);
  --tp-tracking-title2: -0.01em;
  --tp-text-title3: 600 1.25rem/1.625rem var(--tp-font);
  --tp-tracking-title3: 0em;
  --tp-text-body: 400 1.062rem/1.625rem var(--tp-font);
  --tp-tracking-body: 0em;
  --tp-text-callout: 500 1rem/1.375rem var(--tp-font);
  --tp-tracking-callout: 0em;
  --tp-text-subhead: 400 0.9375rem/1.375rem var(--tp-font);
  --tp-tracking-subhead: 0em;
  --tp-text-caption: 500 0.8125rem/1.125rem var(--tp-font);
  --tp-tracking-caption: 0.01em;
  --tp-text-overline: 500 0.75rem/1rem var(--tp-font);
  --tp-tracking-overline: 0.2em;
  --tp-space-0: 0rem;
  --tp-space-4: 0.25rem;
  --tp-space-8: 0.5rem;
  --tp-space-12: 0.75rem;
  --tp-space-16: 1rem;
  --tp-space-20: 1.25rem;
  --tp-space-24: 1.5rem;
  --tp-space-32: 2rem;
  --tp-space-40: 2.5rem;
  --tp-space-48: 3rem;
  --tp-space-64: 4rem;
  --tp-space-80: 5rem;
  --tp-radius-sm: 8px;
  --tp-radius-md: 12px;
  --tp-radius-lg: 16px;
  --tp-radius-xl: 20px;
  --tp-radius-xxl: 28px;
  --tp-radius-pill: 999px;
  --tp-shadow-card: 0 1px 2px rgba(30,90,170,0.06), 0 8px 24px rgba(30,90,170,0.10);
  --tp-duration: 220ms;
  --tp-easing: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tp-background: #0B1F33;
    --tp-background-subtle: #10294A;
    --tp-surface: #13325A;
    --tp-surface-elevated: #183D6B;
    --tp-surface-highlight: #1C4677;
    --tp-border: #1F426E;
    --tp-divider: #1A3A63;
    --tp-text-primary: #F2F7FB;
    --tp-text-secondary: #A9C2D8;
    --tp-text-tertiary: #8AA6BF;
    --tp-text-on-sky: #F2F7FB;
    --tp-text-on-sky-secondary: #BFD6EA;
    --tp-primary: #6EC1FF;
    --tp-on-primary: #0B1F33;
    --tp-accent: #FFC233;
    --tp-on-accent: #0B1F33;
    --tp-accent-text: #FFD04D;
    --tp-temp-high: #FF9F5A;
    --tp-temp-low: #7FC6F7;
    --tp-temp-high-on-sky: #FFB27A;
    --tp-temp-low-on-sky: #9FD6FF;
    --tp-precipitation: #7FC6F7;
    --tp-track: #22466F;
    --tp-focus: #6EC1FF;
    --tp-success: #5CC593;
    --tp-warning: #FFC233;
    --tp-danger: #FF8A80;
    --tp-shadow-card: none;
    --tp-sky-day: var(--tp-sky-night);
  }
}
:root[data-theme="dark"] {
  --tp-background: #0B1F33;
  --tp-background-subtle: #10294A;
  --tp-surface: #13325A;
  --tp-surface-elevated: #183D6B;
  --tp-surface-highlight: #1C4677;
  --tp-border: #1F426E;
  --tp-divider: #1A3A63;
  --tp-text-primary: #F2F7FB;
  --tp-text-secondary: #A9C2D8;
  --tp-text-tertiary: #8AA6BF;
  --tp-text-on-sky: #F2F7FB;
  --tp-text-on-sky-secondary: #BFD6EA;
  --tp-primary: #6EC1FF;
  --tp-on-primary: #0B1F33;
  --tp-accent: #FFC233;
  --tp-on-accent: #0B1F33;
  --tp-accent-text: #FFD04D;
  --tp-temp-high: #FF9F5A;
  --tp-temp-low: #7FC6F7;
  --tp-temp-high-on-sky: #FFB27A;
  --tp-temp-low-on-sky: #9FD6FF;
  --tp-precipitation: #7FC6F7;
  --tp-track: #22466F;
  --tp-focus: #6EC1FF;
  --tp-success: #5CC593;
  --tp-warning: #FFC233;
  --tp-danger: #FF8A80;
  --tp-shadow-card: none;
  --tp-sky-day: var(--tp-sky-night);
}

/* Basis */
html { background: var(--tp-background); color: var(--tp-text-primary); font: var(--tp-text-body); -webkit-font-smoothing: antialiased; }
a { color: var(--tp-primary); }
.tp-overline { font: var(--tp-text-overline); letter-spacing: var(--tp-tracking-overline); text-transform: uppercase; color: var(--tp-accent-text); }
.tp-temperature { font: var(--tp-text-temperature-hero); letter-spacing: var(--tp-tracking-temperature-hero); font-variant-numeric: tabular-nums; }
.tp-card { background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-radius-xl); box-shadow: var(--tp-shadow-card); }
.tp-button { background: var(--tp-primary); color: var(--tp-on-primary); border: 0; border-radius: var(--tp-radius-pill); padding: 0.75rem 1.5rem; font: var(--tp-text-callout); min-height: 44px; }
.tp-button--accent { background: var(--tp-accent); color: var(--tp-on-accent); }
:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 2px; }