/* Nordic Frost — clean arctic daylight (Nord-inspired) */

:root {
  --theme-name: "Nordic Frost";
  color-scheme: light;
  --c-primary: #4C6FA8;
  --c-secondary: #7BC4DA;
  --c-accent: #B38BC8;
  --c-glow-1: #78B9B6;
  --c-glow-2: #6F97C6;
  --c-glow-3: #94BFA0;
  --c-bg: #E9EEF6;
  --c-surface: #F7FAFF;
  --c-surface-2: #E6ECF6;
  --c-surface-3: #D6DDEA;
  --c-text: #1F2A3A;
  --c-muted: #546277;
  --c-border: rgba(76,111,168,.18);
  --c-border-strong: rgba(76,111,168,.34);
  --c-divider: rgba(31,42,58,.10);
  --c-success: #94BFA0;
  --c-warn: #E6C27A;
  --c-danger: #C25763;
  --c-link: #4C6FA8;
  --c-focus: rgba(76,111,168,.30);
  --c-ring: rgba(123,196,218,.32);
  --c-input-bg: rgba(255,255,255,.78);
  --c-input-border: rgba(31,42,58,.16);
  --c-overlay: rgba(31,42,58,.38);
  --c-tooltip: rgba(17,24,39,.92);
  --c-glass: rgba(255,255,255,.58);
  --c-pill-bg: rgba(76,111,168,.11);
  --c-pill-border: rgba(76,111,168,.19);
  --c-on-primary: #FFFFFF;
  --c-on-secondary: #081B24;
  --c-on-danger: #FFFFFF;
  --shadow-1: 0 10px 28px rgba(76,111,168,.14), 0 6px 16px rgba(0,0,0,.06);
  --shadow-2: 0 18px 60px rgba(76,111,168,.16), 0 12px 34px rgba(0,0,0,.09);
  --shadow-glow: 0 0 26px currentColor;
  --r-2: 18px;
  --r-3: 26px;
  --t-fast: 120ms;
  --t-med: 220ms;
  --grad-primary: linear-gradient(135deg, #4C6FA8, #7BC4DA);
  --grad-hero: radial-gradient(900px 520px at 18% 12%, rgba(76,111,168,.22), transparent 58%),
    radial-gradient(760px 420px at 84% 16%, rgba(123,196,218,.18), transparent 56%),
    radial-gradient(620px 420px at 52% 82%, rgba(179,139,200,.16), transparent 60%),
    linear-gradient(180deg, #F7FAFF, #E9EEF6);
}


/* -------------------------------------------------------------------------- */
/* Component & utility classes (shared across all themes)                       */
/* Visual-only: no layout spacing rules (no padding/margins)                    */
/* -------------------------------------------------------------------------- */

html, body {
  background: var(--c-bg);
  color: var(--c-text);
}

a {
  color: var(--c-link);
  text-decoration-color: color-mix(in oklab, var(--c-link) 35%, transparent);
}
a:hover {
  text-decoration-color: color-mix(in oklab, var(--c-link) 75%, transparent);
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--c-focus);
  border-radius: var(--r-2);
}

/* Selection */
::selection {
  background: color-mix(in oklab, var(--c-secondary) 22%, transparent);
  color: var(--c-text);
}

/* Backgrounds */
.bg-app { background: var(--c-bg); color: var(--c-text); }
.bg-hero { background: var(--grad-hero); color: var(--c-text); }
.surface, .card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  color: var(--c-text);
}
.surface-2 {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  color: var(--c-text);
}
.surface-3 {
  background: var(--c-surface-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  color: var(--c-text);
}
.glass {
  background: var(--c-glass);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
  color: var(--c-text);
}

.divider, hr { border-color: var(--c-divider); }
.text-muted { color: var(--c-muted); }
.text-soft { color: color-mix(in oklab, var(--c-text) 70%, var(--c-muted)); }

.text-gradient {
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary), var(--c-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glow-primary   { color: var(--c-primary);   text-shadow: var(--shadow-glow); }
.glow-secondary { color: var(--c-secondary); text-shadow: var(--shadow-glow); }
.glow-accent    { color: var(--c-accent);    text-shadow: var(--shadow-glow); }

/* Buttons */
.btn, button.btn {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  box-shadow: none;
  transition: transform var(--t-fast), box-shadow var(--t-med), border-color var(--t-med), background var(--t-med);
}
.btn:hover {
  border-color: color-mix(in oklab, var(--c-border) 40%, var(--c-primary));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-primary) 12%, transparent);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--grad-primary);
  border-color: color-mix(in oklab, var(--c-primary) 55%, transparent);
  color: var(--c-on-primary);
  box-shadow: 0 14px 36px color-mix(in oklab, var(--c-primary) 25%, transparent);
}
.btn-primary:hover {
  box-shadow: 0 18px 52px color-mix(in oklab, var(--c-secondary) 25%, transparent);
}

.btn-secondary {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c-secondary) 92%, white 8%),
    color-mix(in oklab, var(--c-accent) 82%, white 18%));
  border-color: color-mix(in oklab, var(--c-secondary) 50%, transparent);
  color: var(--c-on-secondary);
}

.btn-outline {
  background: transparent;
  border-color: color-mix(in oklab, var(--c-primary) 45%, var(--c-border));
  color: var(--c-text);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-text);
}
.btn-danger {
  background: linear-gradient(135deg, var(--c-danger), color-mix(in oklab, var(--c-danger) 60%, black 40%));
  border-color: color-mix(in oklab, var(--c-danger) 55%, transparent);
  color: var(--c-on-danger);
}

/* Forms */
.input, input.input, textarea.input, select.input {
  background: var(--c-input-bg);
  color: var(--c-text);
  border: 1px solid var(--c-input-border);
  border-radius: var(--r-2);
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
}
.input::placeholder { color: color-mix(in oklab, var(--c-muted) 75%, transparent); }
.input:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--c-primary) 50%, var(--c-input-border));
  box-shadow: 0 0 0 4px var(--c-ring);
}

.help { color: var(--c-muted); }
.is-invalid { border-color: color-mix(in oklab, var(--c-danger) 60%, var(--c-input-border)); }
.is-valid   { border-color: color-mix(in oklab, var(--c-success) 60%, var(--c-input-border)); }

/* Badges / chips */
.badge, .chip {
  background: var(--c-pill-bg);
  border: 1px solid var(--c-pill-border);
  border-radius: 999px;
  color: var(--c-text);
}
.badge-primary { color: var(--c-primary); }
.badge-success { color: var(--c-success); }
.badge-warn    { color: var(--c-warn); }
.badge-danger  { color: var(--c-danger); }

/* Alerts */
.alert {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border-strong);
  border-radius: var(--r-2);
  color: var(--c-text);
}
.alert-success { border-left-color: var(--c-success); }
.alert-warn    { border-left-color: var(--c-warn); }
.alert-danger  { border-left-color: var(--c-danger); }
.alert-info    { border-left-color: var(--c-secondary); }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
  overflow: hidden;
  color: var(--c-text);
}
.table th, .table td { border-bottom: 1px solid var(--c-divider); }
.table thead th {
  background: var(--c-surface-2);
  color: var(--c-text);
}
.table tbody tr:hover { background: color-mix(in oklab, var(--c-surface-2) 70%, transparent); }

/* Nav / tabs */
.nav {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2);
}
.nav a, .nav-link {
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--t-med), background var(--t-med), border-color var(--t-med);
}
.nav a:hover, .nav-link:hover { color: var(--c-text); }
.nav .active, .nav-link.active {
  color: var(--c-text);
  background: color-mix(in oklab, var(--c-primary) 12%, transparent);
  border-color: color-mix(in oklab, var(--c-primary) 25%, var(--c-border));
}

.kbd {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-bottom-color: color-mix(in oklab, var(--c-border) 40%, black);
  border-radius: 10px;
  color: var(--c-text);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--c-border) 35%, transparent);
}

/* Modal/backdrop helpers */
.backdrop { background: var(--c-overlay); }
.tooltip {
  background: var(--c-tooltip);
  border: 1px solid color-mix(in oklab, var(--c-border) 55%, transparent);
  border-radius: 14px;
  color: var(--c-text);
  box-shadow: var(--shadow-2);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: color-mix(in oklab, var(--c-bg) 92%, black); }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--c-border) 55%, transparent);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--c-primary) 35%, transparent); }