:root {
  color-scheme: light;
  accent-color: var(--color-accent);
  --nv-orange: var(--color-accent);
  --nv-on-orange: var(--color-on-accent);
  --nv-orange-text: var(--color-accent-text);
  --nv-orange-light: var(--color-accent-2);
  --nv-peach: var(--color-accent-soft);
  --nv-cream: var(--color-cream);
  --nv-blue: var(--color-info);
  --nv-green: var(--color-success);
  --nv-green-text: var(--color-success-text);
  --nv-teal: var(--color-teal);
  --nv-purple: var(--color-purple);
  --nv-error: var(--color-error);
  --nv-bg: var(--color-bg);
  --nv-surface: var(--color-surface);
  --nv-surface-secondary: var(--color-surface-2);
  --nv-text: var(--color-text);
  --nv-text-secondary: var(--color-text-2);
  --nv-text-tertiary: var(--color-text-3);
  --nv-border: var(--color-border);
  --nv-border-strong: var(--color-border-strong);
  --nv-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
  --nv-shadow-raised: 0 4px 20px rgba(0, 0, 0, 0.08);
  --nv-shadow-float: 0 10px 40px rgba(0, 0, 0, 0.1);
  --nv-shadow-cta: 0 8px 24px rgba(255, 122, 0, 0.35);
  --nv-shadow-cta-green: 0 8px 22px rgba(76, 217, 100, 0.35);
  --nv-radius-pill: 999px;
  --nv-font-display: "Fredoka", "Nunito", sans-serif;
  --nv-font-body: "Nunito", "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cat-stadt: #ff7a00;
  --cat-land: #2979f5;
  --cat-fluss: #00c2a8;
  --cat-name: #a65ce6;
  --cat-beruf: #e8457a;
  --cat-tier: #34c759;
  --cat-stadt-ink: #8a3b00;
  --cat-land-ink: #1a4fa8;
  --cat-fluss-ink: #0b5e53;
  --cat-name-ink: #6a2fa3;
  --cat-beruf-ink: #9c1f4a;
  --cat-tier-ink: #1f6b30;

  /* ---- Semantic colours (light values; --nv-* above are aliases) ---- */
  --color-accent: #ff7a00;
  --color-on-accent: #1a1a1a;
  --color-accent-text: #b84a00;
  --color-accent-2: #ff9a3c;
  --color-accent-soft: #ffbe6a;
  --color-cream: #fff9e8;
  --color-info: #2979f5;
  --color-success: #4cd964;
  --color-success-text: #1f7a33;
  --color-error: #d32f2f;
  --color-bg: #f3f7fa;
  --color-surface: #ffffff;
  --color-surface-2: #f7f8fa;
  --color-text: #1a1a1a;
  --color-text-2: #6b7076;
  --color-text-3: #6f747b;
  --color-border: #e7e9ec;
  --btn-disabled-bg: #f7d3ae;
  --btn-disabled-text: #6b3f12;
  --color-border-strong: #858b93;
  --color-surface-muted: #eef1f4;
  --color-text-4: #5c6168;
  --color-error-2: #ed3b3b;
  --color-success-2: #2fa544;
  --color-info-text: #2c4c7a;
  --color-teal: #00c2a8;
  --color-purple: #a65ce6;
  --color-purple-text: #7a3eb8;

  /* ---- Warm tints and brown text ---- */
  --color-tint-orange: #fff3e6;
  --color-tint-orange-2: #fff6eb;
  --color-tint-orange-3: #fff5e6;
  --color-tint-cream: #fffdf7;
  --color-tint-peach: #ffe4b8;
  --color-tint-gold: #fff1d6;
  --color-tint-gold-text: #6b3200;
  --color-tint-teal: #e7f7f5;
  --color-tint-teal-text: #134d47;
  --color-brown: #8a4e11;
  --color-brown-2: #96622c;
  --color-brown-3: #7a5427;
  --color-brown-4: #5c3e1c;
  --color-ink-warm: #1b1a17;
  --color-accent-3: #ffb055;
  --color-accent-4: #ffc46a;
  --color-border-soft: #ddd;
  --color-surface-soft: #eee;
  --color-podium-bottom: #ffe4b8;
  --color-icon-empty: #c5c9d1;
  --color-avatar-empty: #ccc;
  --color-input-border: rgba(0, 0, 0, 0.12);
  --color-apple-bg: #1a1a1a;
  --sso-apple-ring: 0 0 0 0 transparent;

  /* ---- Always-dark surfaces (do not flip with theme) ---- */
  --hero-ink: #1a1a1a;
  --hero-accent-text: #b84a00;
  --on-dark-bg: #1b1d22;
  --on-dark-bg-2: #2a2d35;
  --on-dark-bg-3: #33363f;
  --on-dark-text: #fff;
  --on-dark-text-96: rgba(255, 255, 255, 0.96);
  --on-dark-text-60: rgba(255, 255, 255, 0.6);
  --on-dark-text-35: rgba(255, 255, 255, 0.35);
  --on-dark-text-22: rgba(255, 255, 255, 0.22);
  --on-dark-text-12: rgba(255, 255, 255, 0.12);
  --on-dark-text-8: rgba(255, 255, 255, 0.08);
  --on-dark-text-6: rgba(255, 255, 255, 0.06);

  /* ---- Accent tints (exact rgba of #ff7a00) ---- */
  --color-accent-8: rgba(255, 122, 0, 0.08);
  --color-accent-12: rgba(255, 122, 0, 0.12);
  --color-accent-14: rgba(255, 122, 0, 0.14);
  --color-accent-15: rgba(255, 122, 0, 0.15);
  --color-accent-16: rgba(255, 122, 0, 0.16);
  --color-accent-22: rgba(255, 122, 0, 0.22);
  --color-accent-35: rgba(255, 122, 0, 0.35);
  --color-accent-40: rgba(255, 122, 0, 0.4);

  /* ---- Named shadows (exact current literals) ---- */
  --shadow-hero: 0 10px 30px rgba(120, 50, 0, 0.25);
  --shadow-tile: 0 10px 30px rgba(160, 60, 0, 0.28);
  --shadow-cta-teal: 0 8px 24px rgba(0, 194, 168, 0.32);
  --shadow-pill: 0 5px 14px rgba(140, 55, 0, 0.22);
  --shadow-pillar: 0 4px 14px rgba(140, 55, 0, 0.18);
  --shadow-chip: 0 2px 3px rgba(255, 122, 0, 0.15);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-small: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-sticky: 0 -2px 12px #0001;
  --ring-surface: 0 0 0 2px var(--color-surface);

  /* ---- Type scale (unused until P5) ---- */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 56px;

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Radii ---- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;

  /* ---- Category tints (new, unused yet) ---- */
  --cat-stadt-tint: color-mix(in srgb, var(--cat-stadt) 12%, var(--color-surface));
  --cat-land-tint: color-mix(in srgb, var(--cat-land) 12%, var(--color-surface));
  --cat-fluss-tint: color-mix(in srgb, var(--cat-fluss) 12%, var(--color-surface));
  --cat-name-tint: color-mix(in srgb, var(--cat-name) 12%, var(--color-surface));
  --cat-beruf-tint: color-mix(in srgb, var(--cat-beruf) 12%, var(--color-surface));
  --cat-tier-tint: color-mix(in srgb, var(--cat-tier) 12%, var(--color-surface));
}

/* ---- Dark theme: system preference unless forced light, or forced dark. ---- */
/* Keep both blocks identical (no light-dark(), so older browsers still work). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #14130f;
    --color-surface: #1f1d19;
    --color-surface-2: #2a2722;
    --color-surface-muted: #2a2722;
    --color-surface-soft: #34302a;
    --color-text: #f5f1e8;
    --color-text-2: #b8b1a3;
    --color-text-3: #a39c8e;
    --color-text-4: #b0a99b;
    --color-border: #3a362f;
    --color-border-strong: #767063;
  --btn-disabled-bg: #3a352d;
  --btn-disabled-text: #a39c8e;
    --color-border-soft: #3a362f;
    --color-accent: #ff8a1f;
    --color-on-accent: #14130f;
    --color-accent-text: #ffa24d;
    --color-success: #5fd47a;
    --color-success-2: #7ee095;
    --color-success-text: #7ee095;
    --color-error: #ff6b5a;
    --color-error-2: #ff6b5a;
    --color-info: #6aa4ff;
    --color-info-text: #a9c9ff;
    --color-purple-text: #c9a4f2;
    --color-tint-orange: #2b2218;
    --color-tint-orange-2: #2a2119;
    --color-tint-orange-3: #2c2318;
    --color-tint-cream: #24211a;
    --color-tint-peach: #4a3519;
    --color-tint-gold: #33281a;
    --color-tint-gold-text: #ffc98a;
    --color-tint-teal: #1b2b29;
    --color-tint-teal-text: #8fe3d6;
    --color-brown: #e0a868;
    --color-brown-2: #d9a56a;
    --color-brown-3: #d4a870;
    --color-brown-4: #e8c99a;
    --color-icon-empty: #5a564d;
    --color-avatar-empty: #4a453c;
    --color-input-border: rgba(255, 255, 255, 0.14);
    --color-apple-bg: #000000;
    --sso-apple-ring: inset 0 0 0 1px #767063;
    --cat-stadt-ink: #ffa24d;
    --cat-land-ink: #8fb8ff;
    --cat-fluss-ink: #4ddbc4;
    --cat-name-ink: #cfa6f5;
    --cat-beruf-ink: #ff8fb3;
    --cat-tier-ink: #6edb86;
    --nv-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
    --nv-shadow-raised: 0 4px 20px rgba(0, 0, 0, 0.45);
    --nv-shadow-float: 0 10px 40px rgba(0, 0, 0, 0.55);
    --shadow-pill: 0 5px 14px rgba(0, 0, 0, 0.45);
    --shadow-pillar: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-small: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-sticky: 0 -2px 12px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #14130f;
  --color-surface: #1f1d19;
  --color-surface-2: #2a2722;
  --color-surface-muted: #2a2722;
  --color-surface-soft: #34302a;
  --color-text: #f5f1e8;
  --color-text-2: #b8b1a3;
  --color-text-3: #a39c8e;
  --color-text-4: #b0a99b;
  --color-border: #3a362f;
  --color-border-strong: #767063;
  --btn-disabled-bg: #3a352d;
  --btn-disabled-text: #a39c8e;
  --color-border-soft: #3a362f;
  --color-accent: #ff8a1f;
  --color-on-accent: #14130f;
  --color-accent-text: #ffa24d;
  --color-success: #5fd47a;
  --color-success-2: #7ee095;
  --color-success-text: #7ee095;
  --color-error: #ff6b5a;
  --color-error-2: #ff6b5a;
  --color-info: #6aa4ff;
  --color-info-text: #a9c9ff;
  --color-purple-text: #c9a4f2;
  --color-tint-orange: #2b2218;
  --color-tint-orange-2: #2a2119;
  --color-tint-orange-3: #2c2318;
  --color-tint-cream: #24211a;
  --color-tint-peach: #4a3519;
  --color-tint-gold: #33281a;
  --color-tint-gold-text: #ffc98a;
  --color-tint-teal: #1b2b29;
  --color-tint-teal-text: #8fe3d6;
  --color-brown: #e0a868;
  --color-brown-2: #d9a56a;
  --color-brown-3: #d4a870;
  --color-brown-4: #e8c99a;
  --color-icon-empty: #5a564d;
  --color-avatar-empty: #4a453c;
  --color-input-border: rgba(255, 255, 255, 0.14);
  --color-apple-bg: #000000;
  --sso-apple-ring: inset 0 0 0 1px #767063;
  --cat-stadt-ink: #ffa24d;
  --cat-land-ink: #8fb8ff;
  --cat-fluss-ink: #4ddbc4;
  --cat-name-ink: #cfa6f5;
  --cat-beruf-ink: #ff8fb3;
  --cat-tier-ink: #6edb86;
  --nv-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
  --nv-shadow-raised: 0 4px 20px rgba(0, 0, 0, 0.45);
  --nv-shadow-float: 0 10px 40px rgba(0, 0, 0, 0.55);
  --shadow-pill: 0 5px 14px rgba(0, 0, 0, 0.45);
  --shadow-pillar: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-small: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-sticky: 0 -2px 12px rgba(0, 0, 0, 0.5);
}