/* Nord Theme — https://www.nordtheme.com/ */
:root {
  /* Polar Night */
  --nord0: #2E3440;
  --nord1: #3B4252;
  --nord2: #434C5E;
  --nord3: #4C566A;
  /* Snow Storm */
  --nord4: #D8DEE9;
  --nord5: #E5E9F0;
  --nord6: #ECEFF4;
  /* Frost */
  --nord7: #8FBCBB;
  --nord8: #88C0D0;
  --nord9: #81A1C1;
  --nord10: #5E81AC;
  /* Aurora */
  --nord11: #BF616A;
  --nord12: #D08770;
  --nord13: #EBCB8B;
  --nord14: #A3BE8C;
  --nord15: #B48EAD;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 40px rgba(46, 52, 64, 0.18);
  --maxw: 960px;
  --header-h: 64px;

  /* Named Frost / Aurora aliases (palette cohesion) */
  --frost-teal: var(--nord7);
  --frost-ice: var(--nord8);
  --frost-sky: var(--nord9);
  --frost-deep: var(--nord10);
  --aurora-red: var(--nord11);
  --aurora-orange: var(--nord12);
  --aurora-yellow: var(--nord13);
  --aurora-green: var(--nord14);
  --aurora-purple: var(--nord15);
}

/* Light (Nord Snow Storm surfaces) */
html[data-theme="light"],
html[data-theme="system"] {
  --bg: var(--nord6);
  --bg-elevated: #ffffff;
  --bg-muted: var(--nord5);
  --border: var(--nord4);
  --text: var(--nord0);
  --text-muted: var(--nord3);
  --accent: var(--frost-deep);
  --accent-2: var(--frost-ice);
  --accent-3: var(--frost-teal);
  --accent-soft: rgba(94, 129, 172, 0.14);
  --accent-soft-2: rgba(136, 192, 208, 0.16);
  --accent-soft-3: rgba(143, 188, 187, 0.18);
  --on-accent: var(--nord6);
  --link: var(--frost-deep);
  --link-hover: var(--frost-sky);
  --focus-ring: var(--frost-ice);
  --success: var(--aurora-green);
  --success-soft: rgba(163, 190, 140, 0.22);
  --warning: #B48B3E; /* darkened nord13 for WCAG on light snow */
  --warning-fg: #6B5420;
  --warning-soft: rgba(235, 203, 139, 0.35);
  --danger: var(--aurora-red);
  --danger-soft: rgba(191, 97, 106, 0.16);
  --info: var(--frost-sky);
  --info-soft: rgba(129, 161, 193, 0.2);
  --chart-1: var(--frost-deep);
  --chart-2: var(--frost-ice);
  --chart-3: var(--frost-teal);
  --chart-4: var(--frost-sky);
  --chart-5: var(--aurora-purple);
  --heat-1: color-mix(in srgb, var(--frost-sky) 30%, transparent);
  --heat-2: color-mix(in srgb, var(--frost-deep) 48%, transparent);
  --heat-3: color-mix(in srgb, var(--frost-ice) 72%, var(--nord5));
  --heat-4: var(--frost-teal);
  --dropzone-border: var(--frost-sky);
  --footer-bg: var(--nord5);
  --shadow: 0 10px 40px rgba(46, 52, 64, 0.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: var(--nord0);
    --bg-elevated: var(--nord1);
    --bg-muted: var(--nord2);
    --border: var(--nord3);
    --text: var(--nord6);
    --text-muted: var(--nord4);
    --accent: var(--frost-ice);
    --accent-2: var(--frost-teal);
    --accent-3: var(--frost-sky);
    --accent-soft: rgba(136, 192, 208, 0.14);
    --accent-soft-2: rgba(143, 188, 187, 0.14);
    --accent-soft-3: rgba(129, 161, 193, 0.16);
    --on-accent: var(--nord0);
    --link: var(--frost-ice);
    --link-hover: var(--frost-teal);
    --focus-ring: var(--frost-ice);
    --success: var(--aurora-green);
    --success-soft: rgba(163, 190, 140, 0.18);
    --warning: var(--aurora-yellow);
    --warning-fg: var(--aurora-yellow);
    --warning-soft: rgba(235, 203, 139, 0.16);
    --danger: var(--aurora-red);
    --danger-soft: rgba(191, 97, 106, 0.18);
    --info: var(--frost-sky);
    --info-soft: rgba(129, 161, 193, 0.18);
    --chart-1: var(--frost-ice);
    --chart-2: var(--frost-teal);
    --chart-3: var(--frost-sky);
    --chart-4: var(--frost-deep);
    --chart-5: var(--aurora-purple);
    --heat-1: color-mix(in srgb, var(--frost-deep) 32%, transparent);
    --heat-2: color-mix(in srgb, var(--frost-sky) 48%, transparent);
    --heat-3: color-mix(in srgb, var(--frost-ice) 65%, var(--nord1));
    --heat-4: var(--frost-teal);
    --dropzone-border: var(--frost-ice);
    --footer-bg: #242933;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
    color-scheme: dark;
  }
}

html[data-theme="dark"] {
  --bg: var(--nord0);
  --bg-elevated: var(--nord1);
  --bg-muted: var(--nord2);
  --border: var(--nord3);
  --text: var(--nord6);
  --text-muted: var(--nord4);
  --accent: var(--frost-ice);
  --accent-2: var(--frost-teal);
  --accent-3: var(--frost-sky);
  --accent-soft: rgba(136, 192, 208, 0.14);
  --accent-soft-2: rgba(143, 188, 187, 0.14);
  --accent-soft-3: rgba(129, 161, 193, 0.16);
  --on-accent: var(--nord0);
  --link: var(--frost-ice);
  --link-hover: var(--frost-teal);
  --focus-ring: var(--frost-ice);
  --success: var(--aurora-green);
  --success-soft: rgba(163, 190, 140, 0.18);
  --warning: var(--aurora-yellow);
  --warning-fg: var(--aurora-yellow);
  --warning-soft: rgba(235, 203, 139, 0.16);
  --danger: var(--aurora-red);
  --danger-soft: rgba(191, 97, 106, 0.18);
  --info: var(--frost-sky);
  --info-soft: rgba(129, 161, 193, 0.18);
  --chart-1: var(--frost-ice);
  --chart-2: var(--frost-teal);
  --chart-3: var(--frost-sky);
  --chart-4: var(--frost-deep);
  --chart-5: var(--aurora-purple);
  --heat-1: color-mix(in srgb, var(--frost-deep) 32%, transparent);
  --heat-2: color-mix(in srgb, var(--frost-sky) 48%, transparent);
  --heat-3: color-mix(in srgb, var(--frost-ice) 65%, var(--nord1));
  --heat-4: var(--frost-teal);
  --dropzone-border: var(--frost-ice);
  --footer-bg: #242933;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  color-scheme: dark;
}