/* Google Fonts - must be first */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

/* ============================================
   CSS VARIABLES & CUSTOM PROPERTIES
   Queries - Understand what you haven't lived

   OKLCH Conversion-Focused Color System
   High contrast, saturated, Queries/Basecamp inspired
   ============================================ */

:root {
    /* ============================================
       INK - Warm neutrals, high contrast
       Tiny chroma at hue 70 (warm gray) prevents lifeless flat feel
       ============================================ */
    --ink-darkest: oklch(12% 0.006 70);
    --ink-darker: oklch(20% 0.006 70);
    --ink-dark: oklch(33% 0.005 70);
    --ink-medium: oklch(48% 0.005 70);
    --ink-light: oklch(62% 0.004 70);
    --ink-lighter: oklch(86% 0.006 70);
    --ink-lightest: oklch(95.5% 0.005 70);

    /* ============================================
       PRIMARY - Gold (matches Exit Ready brand)
       Premium, warm, authoritative
       ============================================ */
    --accent-darkest: oklch(35% 0.12 90);
    --accent-darker: oklch(50% 0.15 90);
    --accent-dark: oklch(65% 0.16 90);
    --accent-medium: oklch(75% 0.15 90);
    --accent-light: oklch(85% 0.10 90);
    --accent-lighter: oklch(93% 0.05 90);
    --accent-lightest: oklch(97% 0.02 90);

    /* ============================================
       GROWTH - Vibrant Green (success, go)
       Electric, not muted
       ============================================ */
    --growth-darkest: oklch(32% 0.18 155);
    --growth-darker: oklch(42% 0.22 155);
    --growth-dark: oklch(55% 0.24 155);
    --growth-medium: oklch(65% 0.22 155);
    --growth-light: oklch(78% 0.16 155);
    --growth-lighter: oklch(92% 0.08 155);
    --growth-lightest: oklch(97% 0.03 155);

    /* ============================================
       EFFICIENCY - Bold Blue (same as accent)
       ============================================ */
    --efficiency-darkest: var(--accent-darkest);
    --efficiency-darker: var(--accent-darker);
    --efficiency-dark: var(--accent-dark);
    --efficiency-medium: var(--accent-medium);
    --efficiency-light: var(--accent-light);
    --efficiency-lighter: var(--accent-lighter);
    --efficiency-lightest: var(--accent-lightest);

    /* ============================================
       PEOPLE - Violet (bold, modern)
       ============================================ */
    --people-darkest: oklch(30% 0.20 290);
    --people-darker: oklch(40% 0.24 290);
    --people-dark: oklch(52% 0.26 290);
    --people-medium: oklch(62% 0.24 290);
    --people-light: oklch(75% 0.18 290);
    --people-lighter: oklch(90% 0.08 290);
    --people-lightest: oklch(97% 0.03 290);

    /* ============================================
       STRATEGY - Hot Coral (conversion, action)
       ============================================ */
    --strategy-darkest: oklch(35% 0.18 25);
    --strategy-darker: oklch(45% 0.22 25);
    --strategy-dark: oklch(58% 0.24 25);
    --strategy-medium: oklch(68% 0.22 25);
    --strategy-light: oklch(80% 0.16 25);
    --strategy-lighter: oklch(92% 0.08 25);
    --strategy-lightest: oklch(97% 0.03 25);

    /* ============================================
       SEMANTIC ABSTRACTIONS
       ============================================ */
    --color-positive: var(--growth-dark);
    --color-positive-bg: var(--growth-lightest);
    --color-negative: oklch(50% 0.22 25);
    --color-negative-bg: oklch(95% 0.03 25);
    --color-link: var(--efficiency-dark);
    --color-link-hover: var(--efficiency-darker);
    --color-highlight: oklch(92% 0.12 90);
    --color-highlight-strong: oklch(85% 0.16 90);

    /* ============================================
       SURFACE & BACKGROUND TOKENS
       ============================================ */
    --white: oklch(100% 0 0);
    --paper: var(--white);
    --surface: var(--ink-lightest);
    --surface-raised: var(--white);
    --surface-sunken: oklch(92% 0.008 70);

    /* ============================================
       STUDIO COLOR SYSTEM (legacy compat)
       ============================================ */
    --color-base: var(--accent-dark);
    --color-base-light: var(--accent-medium);
    --color-base-mid: var(--accent-light);
    --color-base-soft: var(--accent-lighter);
    --color-base-muted: var(--accent-lighter);
    --color-base-lighter: var(--accent-lightest);
    --color-base-tint: var(--accent-lightest);

    --color-growth: var(--growth-dark);
    --color-growth-light: var(--growth-medium);
    --color-growth-mid: var(--growth-light);
    --color-growth-soft: var(--growth-lighter);
    --color-growth-muted: var(--growth-lighter);
    --color-growth-lighter: var(--growth-lightest);
    --color-growth-tint: var(--growth-lightest);

    --color-efficiency: var(--efficiency-dark);
    --color-efficiency-light: var(--efficiency-medium);
    --color-efficiency-mid: var(--efficiency-light);
    --color-efficiency-soft: var(--efficiency-lighter);
    --color-efficiency-muted: var(--efficiency-lighter);
    --color-efficiency-lighter: var(--efficiency-lightest);
    --color-efficiency-tint: var(--efficiency-lightest);

    --color-people: var(--people-dark);
    --color-people-light: var(--people-medium);
    --color-people-mid: var(--people-light);
    --color-people-soft: var(--people-lighter);
    --color-people-muted: var(--people-lighter);
    --color-people-lighter: var(--people-lightest);
    --color-people-tint: var(--people-lightest);

    --color-strategy: var(--strategy-dark);
    --color-strategy-light: var(--strategy-medium);
    --color-strategy-mid: var(--strategy-light);
    --color-strategy-soft: var(--strategy-lighter);
    --color-strategy-muted: var(--strategy-lighter);
    --color-strategy-lighter: var(--strategy-lightest);
    --color-strategy-tint: var(--strategy-lightest);

    /* Active studio accent (set by modifier class) */
    --studio-accent: var(--color-base);
    --studio-accent-light: var(--color-base-light);
    --studio-accent-lighter: var(--color-base-lighter);
    --studio-accent-tint: var(--color-base-tint);

    /* ============================================
       SEMANTIC BACKGROUND & TEXT TOKENS
       ============================================ */
    --bg-primary: var(--paper);
    --bg-secondary: var(--surface);
    --text-primary: var(--ink-darkest);
    --text-secondary: var(--ink-dark);
    --text-tertiary: var(--ink-medium);
    --border-subtle: var(--border-light);

    /* Legacy aliases */
    --accent: var(--accent-dark);

    /* Semantic ink shortcuts */
    --ink: var(--ink-darkest);
    --ink-80: var(--ink-darker);
    --ink-60: var(--ink-dark);
    --ink-40: var(--ink-medium);
    --ink-20: var(--ink-light);

    --primary: var(--accent-dark);
    --primary-light: var(--accent-light);
    --primary-soft: var(--accent-lightest);

    /* Borders */
    --border-light: var(--ink-lighter);
    --border: oklch(84% 0.005 70);
    --border-dark: var(--ink-light);

    /* Shadows - warm neutral */
    --shadow-sm: 0 1px 3px oklch(20% 0.005 70 / 0.1);
    --shadow-md: 0 4px 8px oklch(20% 0.005 70 / 0.1);
    --shadow-lg: 0 10px 20px oklch(20% 0.005 70 / 0.14);
    --shadow-xl: 0 20px 30px oklch(20% 0.005 70 / 0.18);

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-display: Inter, system-ui, -apple-system, sans-serif;
    --font-ui: Inter, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Type Scale - sized for 45-65+ readability */
    --text-xs: 13px;
    --text-sm: 15px;
    --text-base: 17px;
    --text-lg: 19px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 38px;
    --text-4xl: 48px;
    --text-5xl: 64px;
    --text-6xl: 84px;

    /* ============================================
       SPACING
       ============================================ */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* ============================================
       LAYOUT
       ============================================ */
    --layout-narrow: 640px;
    --layout-content: 800px;
    --layout-wide: 1000px;
    --layout-max: 1200px;

    /* ============================================
       RADIUS
       ============================================ */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 150ms ease;
    --transition: 300ms ease;
    --transition-slow: 500ms ease;

    /* ============================================
       EASING - Queries-inspired
       ============================================ */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
    --ease-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ============================================
       LAYERED SHADOWS - Queries 4-layer system
       ============================================ */
    --shadow:
        0 0 0 1px oklch(20% 0.005 70 / 6%),
        0 0.2em 0.3em oklch(20% 0.005 70 / 6%),
        0 0.4em 0.6em oklch(20% 0.005 70 / 5%),
        0 0.8em 1em oklch(20% 0.005 70 / 4%);

    --shadow-card:
        0 0 0 1px oklch(20% 0.005 70 / 6%),
        0 0.2em 0.3em oklch(20% 0.005 70 / 6%),
        0 0.4em 0.6em oklch(20% 0.005 70 / 5%),
        0 0.8em 1em oklch(20% 0.005 70 / 4%);

    --shadow-card-hover:
        0 0 0 1px oklch(20% 0.005 70 / 8%),
        0 0.3em 0.5em oklch(20% 0.005 70 / 7%),
        0 0.6em 0.8em oklch(20% 0.005 70 / 6%),
        0 1.2em 1.6em oklch(20% 0.005 70 / 5%);

    --shadow-elevated:
        0 0 0 1px oklch(20% 0.005 70 / 6%),
        0 0.1em 0.3em oklch(20% 0.005 70 / 6%),
        0 0.2em 0.6em oklch(20% 0.005 70 / 5%),
        0 0.4em 1em oklch(20% 0.005 70 / 5%),
        0 0.8em 2em oklch(20% 0.005 70 / 4%),
        0 1.2em 3em oklch(20% 0.005 70 / 3%);

    --shadow-glow:
        0 0 20px oklch(65% 0.14 90 / 25%),
        0 0 40px oklch(65% 0.14 90 / 15%);

    /* ============================================
       GOLDEN EFFECT - Premium visual
       ============================================ */
    --color-golden: oklch(89.1% 0.178 95.7);

    /* ============================================
       DIALOG/ANIMATION TIMING
       ============================================ */
    --dialog-duration: 150ms;

    /* ============================================
       FOCUS RING
       ============================================ */
    --focus-ring-color: var(--efficiency-dark);
    --focus-ring-offset: 2px;
    --focus-ring-size: 2px;

    /* ============================================
       BUTTON HOVER BRIGHTNESS
       ============================================ */
    --btn-hover-brightness: 0.9;
}

/* ============================================
   DARK MODE
   Attribute selector for JS-controlled theme
   ============================================ */
[data-theme="dark"] {
    /* Ink — cool neutral, not warm */
    --ink-darkest: oklch(95% 0.005 220);
    --ink-darker: oklch(85% 0.005 220);
    --ink-dark: oklch(72% 0.008 220);
    --ink-medium: oklch(55% 0.008 220);
    --ink-light: oklch(42% 0.008 220);
    --ink-lighter: oklch(26% 0.008 220);
    --ink-lightest: oklch(17% 0.008 220);

    /* Accent — Basecamp green. The standout color. */
    --accent-darkest: oklch(90% 0.08 155);
    --accent-darker: oklch(78% 0.14 155);
    --accent-dark: oklch(65% 0.20 155);
    --accent-medium: oklch(55% 0.18 155);
    --accent-light: oklch(42% 0.14 155);
    --accent-lighter: oklch(28% 0.08 155);
    --accent-lightest: oklch(20% 0.05 155);

    /* Growth — same green family */
    --growth-darkest: oklch(90% 0.08 155);
    --growth-darker: oklch(78% 0.14 155);
    --growth-dark: oklch(65% 0.20 155);
    --growth-medium: oklch(55% 0.18 155);
    --growth-light: oklch(42% 0.14 155);
    --growth-lighter: oklch(28% 0.08 155);
    --growth-lightest: oklch(20% 0.05 155);

    /* Efficiency — blue, lighter for dark bg */
    --efficiency-darkest: oklch(90% 0.06 250);
    --efficiency-darker: oklch(78% 0.10 250);
    --efficiency-dark: oklch(65% 0.16 250);
    --efficiency-medium: oklch(55% 0.14 250);
    --efficiency-light: oklch(42% 0.10 250);
    --efficiency-lighter: oklch(28% 0.06 250);
    --efficiency-lightest: oklch(20% 0.04 250);

    /* People — violet */
    --people-darkest: oklch(90% 0.06 300);
    --people-darker: oklch(78% 0.10 300);
    --people-dark: oklch(65% 0.16 300);
    --people-medium: oklch(52% 0.14 300);
    --people-light: oklch(40% 0.10 300);
    --people-lighter: oklch(26% 0.06 300);
    --people-lightest: oklch(18% 0.04 300);

    /* Strategy — coral */
    --strategy-darkest: oklch(92% 0.06 25);
    --strategy-darker: oklch(80% 0.12 25);
    --strategy-dark: oklch(68% 0.18 25);
    --strategy-medium: oklch(58% 0.16 25);
    --strategy-light: oklch(45% 0.12 25);
    --strategy-lighter: oklch(30% 0.06 25);
    --strategy-lightest: oklch(20% 0.04 25);

    /* Semantic */
    --color-positive: var(--growth-dark);
    --color-positive-bg: var(--growth-lightest);
    --color-negative: oklch(65% 0.20 25);
    --color-negative-bg: oklch(22% 0.06 25);
    --color-link: var(--accent-dark);
    --color-link-hover: var(--accent-darker);
    --color-highlight: oklch(28% 0.08 155);
    --color-highlight-strong: oklch(35% 0.12 155);

    /* Surfaces — cool charcoal, not warm */
    --white: oklch(100% 0 0);
    --paper: oklch(13% 0.008 250);
    --surface: oklch(17% 0.008 250);
    --surface-raised: oklch(21% 0.008 250);
    --surface-sunken: oklch(10% 0.008 250);

    /* Borders */
    --border-light: oklch(24% 0.008 250);
    --border: oklch(30% 0.008 250);
    --border-dark: oklch(38% 0.008 250);

    /* Semantic tokens */
    --bg-primary: var(--paper);
    --bg-secondary: var(--surface);
    --text-primary: var(--ink-darkest);
    --text-secondary: var(--ink-dark);
    --text-tertiary: var(--ink-medium);
    --border-subtle: var(--border-light);

    /* Shadows — black, no warm tint */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.5);
    --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.5);
    --shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.6);

    --shadow:
        0 0 0 1px oklch(0% 0 0 / 40%),
        0 0.2em 1em oklch(0% 0 0 / 40%),
        0 0.4em 2em oklch(0% 0 0 / 30%);

    --shadow-card:
        0 0 0 1px oklch(100% 0 0 / 6%),
        0 0.2em 1em oklch(0% 0 0 / 40%);

    --shadow-card-hover:
        0 0 0 1px oklch(100% 0 0 / 10%),
        0 0.3em 1.5em oklch(0% 0 0 / 50%);

    --shadow-elevated:
        0 0 0 1px oklch(0% 0 0 / 40%),
        0 0.2em 0.6em oklch(0% 0 0 / 35%),
        0 0.4em 1.2em oklch(0% 0 0 / 25%),
        0 0.8em 2.4em oklch(0% 0 0 / 15%);

    /* Button brightness inverts in dark mode */
    --btn-hover-brightness: 1.25;

    /* Golden → green in dark */
    --color-golden: var(--accent-medium);
}

/* ============================================
   KEYFRAME ANIMATIONS - Queries library
   ============================================ */

@keyframes wobble {
  0%   { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
  15%  { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
  25%  { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
  50%  { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
  75%  { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
}

@keyframes success {
  0%   { background-color: var(--border); scale: 0.8; }
  33%  { background-color: var(--border); scale: 1; }
}

@keyframes zoom-fade {
  100% { transform: translateY(-1.5em); scale: 2; opacity: 0; }
}

@keyframes react {
  0%   { transform: scale(0.85); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes scale-fade-out {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

@keyframes slide-up-fade-in {
  from { transform: translateY(2rem); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(2rem); }
}

@keyframes pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shake {
  0%   { transform: translateX(-2rem); }
  25%  { transform: translateX(2rem); }
  50%  { transform: translateX(-1rem); }
  75%  { transform: translateX(1rem); }
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(3deg); }
  40%  { transform: rotate(-3deg); }
  60%  { transform: rotate(3deg); }
  80%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes appear-then-fade {
  0%, 100% { opacity: 0; }
  5%, 60%  { opacity: 1; }
}