/*
 * Kingdom Web Builders tokens as CSS custom properties. Mirrors src/index.ts.
 * Dark is the default surface for Kingdom ID; light mode redefines the
 * semantic layer below, never the raw ramps.
 */
:root {
  --ink: #0a0f24;
  --ink-800: #121831;
  --ink-700: #1c2340;
  --ink-600: #3a4463;
  --ink-500: #5c6685;
  --ink-400: #8b94ae;
  --ink-300: #b6bdcd;
  --ink-200: #dde2ec;
  --ink-100: #edf1f7;
  --ink-50: #f6f8fc;
  --brand-300: #7aa3ff;
  --brand-400: #1079ff;
  --brand-500: #0054ee;
  --brand-600: #0046c7;
  --brand-900: #0b2559;
  --aqua-400: #22d3ee;
  --iris-300: #b9a9ff;
  --iris-600: #6e5bff;
  --danger: #ff6b81;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 14px;
  --font-sans: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader Variable", Newsreader, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Semantic layer: dark */
  --bg: var(--ink);
  --surface: var(--ink-800);
  --surface-raised: var(--ink-700);
  --border: rgb(255 255 255 / 0.1);
  --text: var(--ink-50);
  --text-muted: var(--ink-300);
  --accent: var(--brand-400);
  --accent-text: var(--brand-300);
  --on-accent: #ffffff;
  --focus: var(--aqua-400);
  --error-text: #ff9aa9;
  --border-strong: rgb(255 255 255 / 0.2);
  --input-bg: rgb(255 255 255 / 0.04);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--ink-50);
    --surface: #ffffff;
    --surface-raised: var(--ink-100);
    --border: var(--ink-200);
    --text: var(--ink);
    --text-muted: var(--ink-600);
    --accent: var(--brand-500);
    --accent-text: var(--brand-600);
    --focus: var(--brand-500);
    --error-text: #b4123a;
    --border-strong: var(--ink-300);
    --input-bg: #ffffff;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: var(--ink-50);
  --surface: #ffffff;
  --surface-raised: var(--ink-100);
  --border: var(--ink-200);
  --text: var(--ink);
  --text-muted: var(--ink-600);
  --accent: var(--brand-500);
  --accent-text: var(--brand-600);
  --focus: var(--brand-500);
  --error-text: #b4123a;
  --border-strong: var(--ink-300);
  --input-bg: #ffffff;
  color-scheme: light;
}