/**
 * ThatTutorBot — Space Command design tokens (OKLCH)
 * Space-crew aesthetic: mature, high-tech, kid-safe. Not affiliated with Among Us / Innersloth.
 */
:root {
  /* Void & nebula */
  --ttb-void: oklch(0.14 0.04 265);
  --ttb-void-deep: oklch(0.1 0.035 265);
  --ttb-nebula-a: oklch(0.42 0.18 285);
  --ttb-nebula-b: oklch(0.38 0.14 220);
  --ttb-nebula-c: oklch(0.32 0.12 25);

  /* Surfaces (command deck) */
  --ttb-sky: oklch(0.22 0.04 265);
  --ttb-sky-deep: oklch(0.18 0.035 265);
  --ttb-cloud: oklch(0.26 0.045 265);
  --ttb-surface: oklch(0.2 0.04 265 / 0.72);
  --ttb-surface-raised: oklch(0.24 0.045 265 / 0.88);
  --ttb-surface-solid: oklch(0.22 0.04 265);
  --ttb-ink: oklch(0.95 0.02 265);
  --ttb-ink-muted: oklch(0.78 0.03 265);
  --ttb-ink-soft: oklch(0.62 0.03 265);
  --ttb-border: oklch(0.38 0.06 265 / 0.55);
  --ttb-border-strong: oklch(0.52 0.1 200 / 0.45);
  --ttb-border-glow: oklch(0.72 0.14 200 / 0.35);

  /* Command accents */
  --ttb-signal: oklch(0.78 0.16 200);
  --ttb-signal-deep: oklch(0.62 0.14 200);
  --ttb-signal-soft: oklch(0.28 0.06 200);
  --ttb-meadow: oklch(0.72 0.17 145);
  --ttb-meadow-deep: oklch(0.58 0.14 145);
  --ttb-meadow-soft: oklch(0.26 0.06 145);
  --ttb-alert: oklch(0.62 0.2 25);
  --ttb-gold: oklch(0.82 0.14 88);

  /* App role colors (crew-style, original palette) */
  --ttb-chatbox: oklch(0.68 0.2 25);
  --ttb-chatbox-deep: oklch(0.52 0.17 25);
  --ttb-vocab: oklch(0.7 0.14 200);
  --ttb-vocab-deep: oklch(0.55 0.12 200);
  --ttb-writer: oklch(0.78 0.16 88);
  --ttb-writer-deep: oklch(0.62 0.14 78);
  --ttb-curriculum: oklch(0.66 0.16 285);
  --ttb-curriculum-deep: oklch(0.52 0.14 285);
  --ttb-dashboard: oklch(0.68 0.12 165);
  --ttb-dashboard-deep: oklch(0.54 0.1 165);
  --ttb-leaderboard: oklch(0.8 0.14 88);
  --ttb-coral: oklch(0.68 0.2 25);

  /* Gradients */
  --ttb-sky-gradient: radial-gradient(
      ellipse 120% 80% at 50% -20%,
      oklch(0.28 0.1 285 / 0.9) 0%,
      oklch(0.14 0.04 265) 45%,
      oklch(0.1 0.035 265) 100%
    ),
    linear-gradient(180deg, oklch(0.16 0.05 265) 0%, oklch(0.1 0.035 265) 100%);
  --ttb-hero-gradient: linear-gradient(
    135deg,
    oklch(0.32 0.12 285) 0%,
    oklch(0.22 0.08 265) 40%,
    oklch(0.18 0.1 200) 100%
  );
  --ttb-auth-gradient: linear-gradient(
    160deg,
    oklch(0.16 0.06 265) 0%,
    oklch(0.14 0.08 285) 50%,
    oklch(0.12 0.06 200) 100%
  );
  /* Chat chrome: dark deck; coral is accent only, not full header fill */
  --ttb-chatbox-header: linear-gradient(
    180deg,
    oklch(0.24 0.045 265) 0%,
    oklch(0.17 0.04 265) 100%
  );
  --ttb-chatbox-accent: oklch(0.68 0.2 25);
  --ttb-chatbox-accent-soft: oklch(0.28 0.06 25);
  /* Vocab chrome: dark deck; teal is accent only */
  --ttb-vocab-header: linear-gradient(
    180deg,
    oklch(0.24 0.045 265) 0%,
    oklch(0.17 0.04 265) 100%
  );
  --ttb-vocab-accent: oklch(0.7 0.14 200);
  --ttb-vocab-accent-soft: oklch(0.28 0.06 200);
  /* Writer chrome: dark deck; gold is accent only */
  --ttb-writer-header: linear-gradient(
    180deg,
    oklch(0.24 0.045 265) 0%,
    oklch(0.17 0.04 265) 100%
  );
  --ttb-writer-accent: oklch(0.82 0.14 88);
  --ttb-writer-accent-soft: oklch(0.28 0.06 88);
  --ttb-glow-writer: 0 0 24px oklch(0.82 0.14 88 / 0.28);
  --ttb-curriculum-header: linear-gradient(
    180deg,
    oklch(0.24 0.045 265) 0%,
    oklch(0.17 0.04 265) 100%
  );
  --ttb-curriculum-accent: oklch(0.72 0.14 285);
  --ttb-curriculum-accent-soft: oklch(0.28 0.06 285);
  /* Dashboard chrome: dark deck; mint is accent only */
  --ttb-dashboard-header: linear-gradient(
    180deg,
    oklch(0.24 0.045 265) 0%,
    oklch(0.17 0.04 265) 100%
  );
  --ttb-dashboard-accent: oklch(0.68 0.12 165);
  --ttb-dashboard-accent-soft: oklch(0.28 0.06 165);

  /* Typography */
  --ttb-font-display: "Orbitron", system-ui, sans-serif;
  --ttb-font-body: "Noto Sans", system-ui, sans-serif;
  --ttb-font-mood: "Butterfly Kids", "Noto Sans", cursive;
  --ttb-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Shape & elevation */
  --ttb-radius-sm: 8px;
  --ttb-radius-md: 14px;
  --ttb-radius-lg: 20px;
  --ttb-radius-pill: 999px;
  --ttb-shadow-sm: 0 2px 12px oklch(0.05 0.02 265 / 0.45);
  --ttb-shadow-md: 0 8px 32px oklch(0.05 0.02 265 / 0.55);
  --ttb-shadow-lg: 0 20px 50px oklch(0.05 0.02 265 / 0.65);
  --ttb-glow-signal: 0 0 24px oklch(0.72 0.14 200 / 0.35);

  /* Layout (nav → main content) */
  --ttb-layout-max: 72rem;
  --ttb-layout-gutter: 1rem;
  --ttb-layout-nav-gap: 1.25rem;

  /* Motion */
  --ttb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ttb-duration: 0.22s;

  /* Legacy aliases */
  --primary-green: var(--ttb-meadow);
  --success-green: var(--ttb-meadow);
  --background-gradient: var(--ttb-auth-gradient);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ttb-duration: 0.01ms;
  }
}