/* ============================================================================
 * IPOL design tokens — single source of truth for colours, type, spacing.
 * Light theme on :root, dark theme on [data-theme="dark"] (and via the OS
 * preference when no explicit choice is stored). Components should consume these
 * variables instead of hard-coded values; this is the base of the incremental
 * modernisation (keeps the existing vanilla-JS app, restyles via tokens).
 * ==========================================================================*/

:root,
[data-theme="light"] {
  /* Brand accent — PAGODA / LIRIS blue (from the PAGODA design system). */
  --accent: #174a7c;
  --accent-hover: #003763;
  --accent-contrast: #ffffff;
  --accent-soft: #d3e4ff;

  /* Top banner — matches the PAGODA portal sidebar (navy gradient, on-navy text). */
  --banner-bg: #174a7c;
  --banner-bg-dark: #0f3a5c;
  --banner-text: #ffffff;
  --banner-text-muted: #d1d0de;
  --banner-hover: rgba(255, 255, 255, 0.12);

  /* Surfaces (light) — LIRIS Material-3 surfaces */
  --bg: #f9f9ff;
  --surface: #ffffff;
  --surface-2: #f3f3fa;
  --surface-hover: #edeef4;
  --overlay: rgba(17, 17, 27, 0.45);

  /* Text */
  --text: #1a1b1f;
  --text-secondary: #434750;
  --text-muted: #747780;

  /* Borders & lines */
  --border: #c4c6d0;
  --border-strong: #747780;

  /* Semantic (LIRIS) */
  --success: #1c8a4b;
  --success-soft: #e3f6ec;
  --danger: #ba1a1a;
  --danger-soft: #ffdad6;
  --warning: #d99413;
  --warning-soft: #fbf0db;

  /* Radii */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.06);
  --shadow: 0 4px 14px rgba(20, 20, 40, 0.08);
  --shadow-lg: 0 12px 34px rgba(20, 20, 40, 0.14);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo,
    Consolas, monospace;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Dark theme — explicit opt-in. */
[data-theme="dark"] {
  --accent: #a8c8ff;
  --accent-hover: #d3e4ff;
  --accent-contrast: #002f59;
  --accent-soft: #004375;

  --banner-bg: #0f1e2d;
  --banner-bg-dark: #0a1623;
  --banner-text: #e2e2e9;
  --banner-text-muted: #8c8f99;
  --banner-hover: rgba(168, 200, 255, 0.14);

  --bg: #121317;
  --surface: #1e1f23;
  --surface-2: #292a2e;
  --surface-hover: #343439;
  --overlay: rgba(0, 0, 0, 0.6);

  --text: #e2e2e9;
  --text-secondary: #c4c6d0;
  --text-muted: #8c8f99;

  --border: #434750;
  --border-strong: #8c8f99;

  --success: #36c280;
  --success-soft: #16271f;
  --danger: #ff6b7d;
  --danger-soft: #2a1820;
  --warning: #e6ad3f;
  --warning-soft: #2a2113;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Follow the OS preference when the user hasn't chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --accent: #a8c8ff;
    --accent-hover: #d3e4ff;
    --accent-contrast: #002f59;
    --accent-soft: #004375;
    --banner-bg: #0f1e2d;
    --banner-bg-dark: #0a1623;
    --banner-text: #e2e2e9;
    --banner-text-muted: #8c8f99;
    --banner-hover: rgba(168, 200, 255, 0.14);
    --bg: #121317;
    --surface: #1e1f23;
    --surface-2: #292a2e;
    --surface-hover: #343439;
    --overlay: rgba(0, 0, 0, 0.6);
    --text: #e2e2e9;
    --text-secondary: #c4c6d0;
    --text-muted: #8c8f99;
    --border: #434750;
    --border-strong: #8c8f99;
    --success: #36c280;
    --success-soft: #16271f;
    --danger: #ff6b7d;
    --danger-soft: #2a1820;
    --warning: #e6ad3f;
    --warning-soft: #2a2113;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.55);
  }
}