/* ============================================================
   ZURA — Design Tokens
   Blue palette — base: oklch(0.2 0.04 244.86)
   All hues anchored at 244.86 (blue), variants via L/C/opacity
   Dark mode default, light mode via [data-theme="light"]
   ============================================================ */

:root,
[data-theme="dark"] {
  /* --- Radius --- */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* --- Blue palette base --- */
  /* Base anchor: oklch(0.2 0.04 244.86) */

  /* Backgrounds — dark blue tones */
  --background:        oklch(0.11 0.025 244.86);   /* near-black blue */
  --foreground:        oklch(0.94 0.006 244.86);   /* near-white, subtle blue tint */

  --card:              oklch(0.14 0.03 244.86);    /* dark blue card surface */
  --card-foreground:   oklch(0.94 0.006 244.86);

  --popover:           oklch(0.16 0.035 244.86);   /* slightly lighter than card */
  --popover-foreground:oklch(0.94 0.006 244.86);

  /* Primary — deep steel blue, dark and distinctive */
  --primary:           oklch(0.22 0.04 234.53);
  --primary-foreground:oklch(0.97 0.006 240);

  /* Secondary — base blue surface */
  --secondary:         oklch(0.2 0.04 244.86);
  --secondary-foreground:oklch(0.94 0.006 244.86);

  /* Muted */
  --muted:             oklch(0.2 0.04 244.86);
  --muted-foreground:  oklch(0.6 0.03 244.86);

  /* Accent — slightly lighter blue for hover */
  --accent:            oklch(0.24 0.05 244.86);
  --accent-foreground: oklch(0.94 0.006 244.86);

  --destructive:       oklch(0.65 0.22 22.216);
  --destructive-foreground:oklch(0.98 0 0);

  /* Borders & inputs */
  --border:            oklch(0.5 0.08 244.86 / 22%);
  --input:             oklch(0.5 0.08 244.86 / 16%);
  /* Ring/focus — steel blue, clearly visible */
  --ring:              oklch(0.35 0.14 235);

  /* Sidebar — slightly darker than card */
  --sidebar:           oklch(0.14 0.03 244.86);
  --sidebar-foreground:oklch(0.94 0.006 244.86);
  --sidebar-border:    oklch(0.5 0.08 244.86 / 15%);

  /* Chart */
  --chart-1: oklch(0.5 0.16 240);
  --chart-2: oklch(0.65 0.18 200);
  --chart-3: oklch(0.72 0.15 170);
  --chart-4: oklch(0.55 0.22 280);
  --chart-5: oklch(0.68 0.2  220);

  /* --- Typography --- */
  --font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-serif: Georgia, 'Times New Roman', serif;

  /* --- Shadows --- */
  --shadow-2xs: 0px 1px 2px 0px oklch(0 0 0 / 18%);
  --shadow-xs:  0px 1px 2px 0px oklch(0 0 0 / 28%);
  --shadow-sm:  0px 2px 4px 0px oklch(0 0 0 / 35%);
  --shadow-md:  0px 4px 8px 0px oklch(0 0 0 / 40%);
  --shadow-lg:  0px 8px 16px 0px oklch(0 0 0 / 45%);

  /* --- Animation --- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
}

[data-theme="light"] {
  /* Light mode — keep blue hue, flip lightness */
  --background:        oklch(0.97 0.008 244.86);
  --foreground:        oklch(0.14 0.04 244.86);

  --card:              oklch(1 0 0);
  --card-foreground:   oklch(0.14 0.04 244.86);

  --popover:           oklch(1 0 0);
  --popover-foreground:oklch(0.14 0.04 244.86);

  --primary:           oklch(0.38 0.13 240);
  --primary-foreground:oklch(0.97 0 0);

  --secondary:         oklch(0.91 0.015 244.86);
  --secondary-foreground:oklch(0.2 0.04 244.86);

  --muted:             oklch(0.93 0.012 244.86);
  --muted-foreground:  oklch(0.45 0.04 244.86);

  --accent:            oklch(0.91 0.015 244.86);
  --accent-foreground: oklch(0.2 0.04 244.86);

  --destructive:       oklch(0.577 0.245 27.325);
  --destructive-foreground:oklch(0.985 0 0);

  --border:            oklch(0.2 0.04 244.86 / 18%);
  --input:             oklch(0.2 0.04 244.86 / 12%);
  --ring:              oklch(0.32 0.13 235);

  --sidebar:           oklch(0.94 0.01 244.86);
  --sidebar-foreground:oklch(0.14 0.04 244.86);
  --sidebar-border:    oklch(0.2 0.04 244.86 / 14%);
}

/* ---- Keyframe animations ---- */
@keyframes fade-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes fade-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes slide-in-from-bottom { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes slide-in-from-top    { from { transform: translateY(-8px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes slide-in-from-left   { from { transform: translateX(-8px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes slide-in-from-right  { from { transform: translateX(8px); opacity: 0 } to { transform: none; opacity: 1 } }