/* KNOX BANK — Modern Color Palette & Design System Tokens */

/*
 * Source Sans 3, self-hosted, one variable file covering 400-800.
 *
 * It came with the main-page design. Serving it from this origin replaced
 * two Google Fonts requests, which is why `font-src` and `style-src` in
 * `api/src/plugins/static.ts` are now plain 'self'. If a weight ever looks
 * wrong, check the range above before adding a second @font-face: the file
 * is variable, so a static duplicate would fight it.
 */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/source-sans-3-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;

  --f-ui: 'Source Sans 3', "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --f-exam: "Source Sans 3", "Segoe UI", Arial, sans-serif;

  /* Knox blue: ink, paper, and one deliberate action color. */
  --accent: oklch(0.53 0.20 255);
  --accent-hover: oklch(0.46 0.19 255);
  --accent-soft: oklch(0.94 0.035 255);
  --accent-border: oklch(0.63 0.11 255);

  --canvas: oklch(0.975 0.012 250);
  --surface: oklch(0.995 0.004 250 / 0.96);
  --surface-solid: oklch(0.995 0.004 250);
  --panel: oklch(0.955 0.020 250);
  --border: oklch(0.875 0.016 250);
  --border-strong: oklch(0.62 0.024 250);

  --text: oklch(0.20 0.028 255);
  --text-muted: oklch(0.42 0.024 255);
  --text-faint: oklch(0.49 0.018 255);

  --success: oklch(0.52 0.115 155);
  --danger: oklch(0.55 0.19 25);
  --warning: oklch(0.55 0.105 75);

  --hot-high: oklch(0.55 0.19 25);
  --hot-mid: oklch(0.55 0.105 75);
  --hot-low: oklch(0.52 0.10 165);
  /* PURPLE is the source material's own category, not a rung above RED HOT:
     the same lightness family as the other three, its own hue. */
  --hot-purple: oklch(0.52 0.16 305);

  --on-accent: oklch(0.985 0.008 250);

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  --shadow-glass: 0 4px 20px 0 color-mix(in oklab, var(--text) 6%, transparent);
  --shadow-hover: 0 16px 36px -8px color-mix(in oklab, var(--text) 14%, transparent), 0 4px 14px -2px color-mix(in oklab, var(--accent) 8%, transparent);
  --shadow-overlay: 0 16px 40px -10px color-mix(in oklab, var(--text) 22%, transparent);

  --tint: 0.06;
  --font-scale: 1;
  --font-weight-body: 400;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: oklch(0.73 0.18 255);
  --accent-hover: oklch(0.80 0.15 255);
  --accent-soft: oklch(0.27 0.060 255);
  --accent-border: oklch(0.55 0.11 255);

  --canvas: oklch(0.15 0.025 255);
  --surface: oklch(0.205 0.030 255 / 0.94);
  --surface-solid: oklch(0.205 0.030 255);
  --panel: oklch(0.185 0.026 255);
  --border: oklch(0.33 0.030 255);
  --border-strong: oklch(0.35 0.040 255);

  --text: oklch(0.95 0.010 255);
  --text-muted: oklch(0.78 0.020 255);
  --text-faint: oklch(0.68 0.018 255);

  --success: oklch(0.76 0.15 155);
  --danger: oklch(0.74 0.15 25);
  --warning: oklch(0.80 0.13 75);

  --hot-high: oklch(0.74 0.15 25);
  --hot-mid: oklch(0.80 0.13 75);
  --hot-low: oklch(0.76 0.12 165);
  --hot-purple: oklch(0.76 0.14 305);

  --on-accent: oklch(0.15 0.02 255);
  --shadow-glass: 0 4px 20px 0 color-mix(in oklab, var(--text) 20%, transparent);
  --shadow-hover: 0 16px 40px -6px color-mix(in oklab, var(--text) 42%, transparent);
  --shadow-overlay: 0 16px 48px -10px color-mix(in oklab, var(--text) 58%, transparent);
  --tint: 0.14;
}

:root[data-theme="sepia"] {
  color-scheme: light;
  --accent: oklch(0.50 0.15 255);
  --accent-hover: oklch(0.42 0.14 255);
  --accent-soft: oklch(0.92 0.030 255);
  --accent-border: oklch(0.62 0.075 255);
  --canvas: oklch(0.96 0.035 85);
  --surface: oklch(0.985 0.020 88 / 0.96);
  --surface-solid: oklch(0.985 0.020 88);
  --panel: oklch(0.935 0.040 85);
  --border: oklch(0.82 0.040 85);
  --border-strong: oklch(0.62 0.050 80);
  --text: oklch(0.31 0.045 70);
  --text-muted: oklch(0.49 0.035 70);
  --text-faint: oklch(0.55 0.030 70);
  --success: oklch(0.46 0.11 150);
  --danger: oklch(0.50 0.16 25);
  --warning: oklch(0.52 0.11 75);
  --hot-high: oklch(0.50 0.16 25);
  --hot-mid: oklch(0.52 0.11 75);
  --hot-low: oklch(0.46 0.10 160);
  --hot-purple: oklch(0.48 0.15 305);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: calc(0.875rem * var(--font-scale));
  font-weight: var(--font-weight-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 250ms ease-out, color 250ms ease-out;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Micro Animations */
@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(200%) rotate(25deg); }
}

@keyframes pulseTag {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes iconWiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg) scale(1.15); }
  75% { transform: rotate(12deg) scale(1.15); }
  100% { transform: rotate(0deg) scale(1.1); }
}

@keyframes checkPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}