/*
 * Herald Global Styles
 * CSS Layers, Design Tokens, and Dark Mode
 *
 * Following Fizzy/Cortex patterns from 37signals
 * All design tokens live here as CSS custom properties
 */

/* ==========================================================================
   Layer Declarations - Establishes cascade priority
   ========================================================================== */

@layer reset, base, components, utilities;

/* ==========================================================================
   Color Scheme
   ========================================================================== */

:root {
  /* Herald is dark-first; explicit user theme choices still win. */
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

/* ==========================================================================
   Color Palette - OKLCH
   Ready-to-use color values
   ========================================================================== */

:root {
  /* Zinc - Primary neutral scale */
  --color-zinc-50:  oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);

  /* Blue - Primary brand */
  --color-blue-50:  oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.059 254.128);
  --color-blue-300: oklch(0.809 0.105 251.813);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-800: oklch(0.424 0.199 265.638);
  --color-blue-900: oklch(0.379 0.146 265.522);
  --color-blue-950: oklch(0.282 0.091 267.935);

  /* Green - Success states */
  --color-green-50:  oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-200: oklch(0.925 0.084 155.995);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-800: oklch(0.448 0.119 151.328);
  --color-green-950: oklch(0.266 0.065 152.934);

  /* Red - Error/danger states */
  --color-red-50:  oklch(0.971 0.013 17.38);
  --color-red-100: oklch(0.936 0.032 17.717);
  --color-red-200: oklch(0.885 0.062 18.334);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-800: oklch(0.444 0.177 26.899);
  --color-red-950: oklch(0.258 0.092 26.042);

  /* Amber - Warning states */
  --color-amber-50:  oklch(0.987 0.022 95.277);
  --color-amber-100: oklch(0.962 0.059 95.617);
  --color-amber-200: oklch(0.924 0.12 95.746);
  --color-amber-500: oklch(0.769 0.188 70.08);
  --color-amber-600: oklch(0.666 0.179 58.318);
  --color-amber-800: oklch(0.473 0.137 46.201);
  --color-amber-950: oklch(0.279 0.077 45.635);

  /* Purple - Accent */
  --color-purple-50:  oklch(0.977 0.014 308.299);
  --color-purple-100: oklch(0.946 0.033 307.174);
  --color-purple-500: oklch(0.627 0.265 303.9);
  --color-purple-600: oklch(0.558 0.288 302.321);
  --color-purple-950: oklch(0.291 0.149 302.717);

  /* Herald brand palette - use semantic tokens in components */
  --color-herald-primary: #00EAAB;
  --color-herald-primary-hover: #19EFB5;
  --color-herald-primary-dark: #00A87A;
  --color-herald-primary-text: #007A59;
  --color-herald-secondary: #00AAFF;
  --color-herald-tertiary: #F5C842;
  --color-herald-error: #E63462;
  --color-herald-frost: #F0FBF8;
  --color-herald-space: #060A16;
  --color-herald-surface: #0A1220;
  --color-herald-surface-high: #111A2B;
  --color-herald-text: #FFFFFF;
}

/* ==========================================================================
   Semantic Colors - using light-dark() for automatic dark mode
   ========================================================================== */

:root {
  /* Canvas & Surface - Herald brand, dark-first with light-mode compatibility */
  --color-canvas: light-dark(var(--color-herald-frost), var(--color-herald-space));
  --color-surface: light-dark(var(--color-herald-text), var(--color-herald-surface));
  --color-surface-alt: light-dark(var(--color-zinc-50), var(--color-herald-space));
  --color-surface-raised: light-dark(var(--color-zinc-100), var(--color-herald-surface-high));
  --color-surface-muted: light-dark(var(--color-zinc-100), rgb(255 255 255 / 0.06));

  /* Ink (text) */
  --color-ink: light-dark(var(--color-herald-space), var(--color-herald-text));
  --color-ink-muted: light-dark(var(--color-zinc-600), rgb(255 255 255 / 0.60));
  --color-ink-subtle: light-dark(var(--color-zinc-500), rgb(255 255 255 / 0.45));
  --color-ink-faint: light-dark(var(--color-zinc-400), rgb(255 255 255 / 0.35));
  --color-ink-reversed: light-dark(var(--color-herald-text), var(--color-herald-space));
  --color-on-primary: light-dark(var(--color-herald-text), var(--color-herald-space));

  /* Interactive */
  --color-link: light-dark(var(--color-herald-primary-text), var(--color-herald-primary));
  --color-link-hover: light-dark(var(--color-herald-space), var(--color-herald-secondary));
  --color-focus: light-dark(var(--color-herald-primary-text), var(--color-herald-primary));
  --color-selection: light-dark(rgb(0 168 122 / 0.20), rgb(0 234 171 / 0.28));

  /* Primary action */
  --color-primary: light-dark(var(--color-herald-primary-text), var(--color-herald-primary));
  --color-primary-hover: light-dark(color-mix(in oklch, var(--color-herald-primary-dark) 82%, var(--color-herald-space)), var(--color-herald-primary-hover));
  --color-primary-subtle: light-dark(rgb(0 168 122 / 0.12), rgb(0 234 171 / 0.12));
  --color-primary-border: light-dark(rgb(0 168 122 / 0.25), rgb(0 234 171 / 0.18));

  /* Borders */
  --color-border: light-dark(rgb(6 10 22 / 0.12), rgb(255 255 255 / 0.08));
  --color-border-muted: light-dark(rgb(6 10 22 / 0.08), rgb(255 255 255 / 0.06));
  --color-border-strong: light-dark(rgb(6 10 22 / 0.20), rgb(255 255 255 / 0.14));
  --color-border-accent: var(--color-primary-border);

  /* State: Positive/Success */
  --color-positive: var(--color-primary);
  --color-positive-canvas: var(--color-primary-subtle);
  --color-positive-border: var(--color-primary-border);
  --color-success: var(--color-positive);

  /* State: Negative/Error */
  --color-negative: var(--color-herald-error);
  --color-on-danger: var(--color-herald-space);
  --color-negative-canvas: light-dark(rgb(230 52 98 / 0.10), rgb(230 52 98 / 0.12));
  --color-negative-border: light-dark(rgb(230 52 98 / 0.24), rgb(230 52 98 / 0.22));
  --color-danger: var(--color-negative);
  --color-danger-subtle: var(--color-negative-canvas);

  /* State: Warning */
  --color-warning: var(--color-herald-tertiary);
  --color-warning-canvas: light-dark(rgb(245 200 66 / 0.14), rgb(245 200 66 / 0.12));
  --color-warning-border: light-dark(rgb(245 200 66 / 0.28), rgb(245 200 66 / 0.22));

  /* State: Info */
  --color-info: var(--color-herald-secondary);
  --color-info-canvas: light-dark(rgb(0 170 255 / 0.12), rgb(0 170 255 / 0.12));
  --color-info-border: light-dark(rgb(0 170 255 / 0.24), rgb(0 170 255 / 0.22));

  /* Category colors for releases */
  --color-feature: var(--color-herald-secondary);
  --color-improvement: var(--color-primary);
  --color-fix: var(--color-primary);
  --color-security: var(--color-negative);
  --color-deprecation: var(--color-warning);
}

/* ==========================================================================
   Spacing Scale
   ========================================================================== */

:root {
  --space-px: 1px;
  --space-0_5: 0.125rem; /* 2px */
  --space-1:   0.25rem;  /* 4px */
  --space-1_5: 0.375rem; /* 6px */
  --space-2:   0.5rem;   /* 8px */
  --space-2_5: 0.625rem; /* 10px */
  --space-3:   0.75rem;  /* 12px */
  --space-3_5: 0.875rem; /* 14px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-7:   1.75rem;  /* 28px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */
}

/* ==========================================================================
   Typography
   ========================================================================== */

:root {
  /* Font families */
  --font-sans: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Font sizes */
  --text-xs:   0.75rem;  /* 12px */
  --text-sm:   0.875rem; /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg:   1.125rem; /* 18px */
  --text-xl:   1.25rem;  /* 20px */
  --text-2xl:  1.5rem;   /* 24px */
  --text-3xl:  1.875rem; /* 30px */
  --text-4xl:  2.25rem;  /* 36px */

  /* Font weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line heights */
  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
}

/* ==========================================================================
   Border Radii
   ========================================================================== */

:root {
  --radius-none: 0;
  --radius-sm:   0.25rem;  /* 4px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;
}

/* ==========================================================================
   Shadows & Focus
   ========================================================================== */

:root {
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 8px 32px rgb(0 0 0 / 0.45);
  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.60);

  /* Cards stay shadowless; use tonal layers and borders instead. */
  --shadow-card: none;
  --shadow-card-hover: none;

  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--color-focus) 22%, transparent);
  --shadow-glow-accent: 0 0 20px rgb(0 234 171 / 0.15);
  --shadow-glow-accent-lg: 0 0 40px rgb(0 234 171 / 0.25);
}

/* ==========================================================================
   Layout
   ========================================================================== */

:root {
  /* Max widths */
  --max-width-sm:  24rem;  /* 384px */
  --max-width-md:  28rem;  /* 448px */
  --max-width-lg:  32rem;  /* 512px */
  --max-width-xl:  36rem;  /* 576px */
  --max-width-2xl: 42rem;  /* 672px */
  --max-width-3xl: 48rem;  /* 768px */
  --max-width-4xl: 56rem;  /* 896px */
  --max-width-5xl: 64rem;  /* 1024px */
  --max-width-6xl: 72rem;  /* 1152px */

  /* Breakpoints (for reference in media queries) */
  --breakpoint-sm: 40rem;  /* 640px */
  --breakpoint-md: 48rem;  /* 768px */
  --breakpoint-lg: 64rem;  /* 1024px */
  --breakpoint-xl: 80rem;  /* 1280px */
}

/* ==========================================================================
   Animation Tokens
   ========================================================================== */

:root {
  --duration-instant: 0.1s;
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.4s;
  
  /* Premium easing curves */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Page enter animation for Turbo */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Lexxy Editor Theme Overrides
   ========================================================================== */

:root {
  /* Override lexxy colors to support dark mode */
  --lexxy-color-ink: var(--color-ink);
  --lexxy-color-ink-medium: var(--color-ink-muted);
  --lexxy-color-ink-light: var(--color-ink-subtle);
  --lexxy-color-ink-lighter: var(--color-border);
  --lexxy-color-ink-lightest: var(--color-surface-muted);
  --lexxy-color-ink-inverted: var(--color-surface);

  --lexxy-color-canvas: var(--color-surface);
  --lexxy-color-text: var(--color-ink);
  --lexxy-color-text-subtle: var(--color-ink-muted);
  --lexxy-color-link: var(--color-link);
  --lexxy-color-selected: var(--color-primary-subtle);
  --lexxy-color-selected-hover: color-mix(in oklch, var(--color-primary-subtle) 70%, var(--color-surface-raised));
  --lexxy-color-code-bg: var(--color-surface-muted);

  --lexxy-color-accent-dark: var(--color-primary);
  --lexxy-color-accent-medium: var(--color-primary);
  --lexxy-color-accent-light: var(--color-primary-subtle);
  --lexxy-color-accent-lightest: var(--color-primary-subtle);

  --lexxy-focus-ring-color: var(--color-primary);
}