/*
 * 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 {
  color-scheme: light 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);
}

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

:root {
  /* Canvas & Surface */
  --color-canvas: light-dark(var(--color-zinc-50), var(--color-zinc-900));
  --color-surface: light-dark(white, var(--color-zinc-800));
  --color-surface-alt: light-dark(var(--color-zinc-50), var(--color-zinc-900));
  --color-surface-raised: light-dark(white, var(--color-zinc-700));
  --color-surface-muted: light-dark(var(--color-zinc-100), var(--color-zinc-800));

  /* Ink (text) */
  --color-ink: light-dark(var(--color-zinc-900), var(--color-zinc-50));
  --color-ink-muted: light-dark(var(--color-zinc-500), var(--color-zinc-400));
  --color-ink-subtle: light-dark(var(--color-zinc-400), var(--color-zinc-500));
  --color-ink-reversed: light-dark(white, var(--color-zinc-950));

  /* Interactive */
  --color-link: light-dark(var(--color-blue-600), var(--color-blue-400));
  --color-link-hover: light-dark(var(--color-blue-700), var(--color-blue-300));
  --color-focus: light-dark(var(--color-blue-500), var(--color-blue-400));

  /* Primary action */
  --color-primary: light-dark(var(--color-blue-600), var(--color-blue-500));
  --color-primary-hover: light-dark(var(--color-blue-700), var(--color-blue-400));

  /* Borders */
  --color-border: light-dark(var(--color-zinc-200), var(--color-zinc-700));
  --color-border-muted: light-dark(var(--color-zinc-100), var(--color-zinc-800));
  --color-border-strong: light-dark(var(--color-zinc-400), var(--color-zinc-600));

  /* State: Positive/Success */
  --color-positive: light-dark(var(--color-green-600), var(--color-green-500));
  --color-positive-canvas: light-dark(var(--color-green-50), var(--color-green-950));
  --color-positive-border: light-dark(var(--color-green-200), var(--color-green-800));
  --color-success: var(--color-positive);

  /* State: Negative/Error */
  --color-negative: light-dark(var(--color-red-600), var(--color-red-500));
  --color-negative-canvas: light-dark(var(--color-red-50), var(--color-red-950));
  --color-negative-border: light-dark(var(--color-red-200), var(--color-red-800));
  --color-danger: var(--color-negative);
  --color-danger-subtle: var(--color-negative-canvas);

  /* State: Warning */
  --color-warning: light-dark(var(--color-amber-600), var(--color-amber-500));
  --color-warning-canvas: light-dark(var(--color-amber-50), var(--color-amber-950));
  --color-warning-border: light-dark(var(--color-amber-200), var(--color-amber-800));

  /* State: Info */
  --color-info: light-dark(var(--color-blue-600), var(--color-blue-400));
  --color-info-canvas: light-dark(var(--color-blue-50), var(--color-blue-950));
  --color-info-border: light-dark(var(--color-blue-200), var(--color-blue-800));

  /* Category colors for releases */
  --color-feature: light-dark(var(--color-blue-600), var(--color-blue-400));
  --color-improvement: light-dark(var(--color-purple-600), var(--color-purple-500));
  --color-fix: light-dark(var(--color-green-600), var(--color-green-500));
  --color-security: light-dark(var(--color-red-600), var(--color-red-500));
  --color-deprecation: light-dark(var(--color-amber-600), var(--color-amber-500));
}

/* ==========================================================================
   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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-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.125rem; /* 2px */
  --radius-md:   0.375rem; /* 6px */
  --radius-lg:   0.5rem;   /* 8px */
  --radius-xl:   0.75rem;  /* 12px */
  --radius-2xl:  1rem;     /* 16px */
  --radius-full: 9999px;
}

/* ==========================================================================
   Shadows - Layered for depth and realism
   ========================================================================== */

:root {
  /* Subtle elevation shadows - inspired by Material Design / Linear */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 
    0 1px 2px rgb(0 0 0 / 0.04),
    0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md: 
    0 2px 4px rgb(0 0 0 / 0.04),
    0 4px 8px rgb(0 0 0 / 0.08);
  --shadow-lg: 
    0 4px 8px rgb(0 0 0 / 0.04),
    0 8px 16px rgb(0 0 0 / 0.08),
    0 16px 32px rgb(0 0 0 / 0.04);
  --shadow-xl: 
    0 8px 16px rgb(0 0 0 / 0.04),
    0 16px 32px rgb(0 0 0 / 0.08),
    0 32px 64px rgb(0 0 0 / 0.08);

  /* Card-specific shadow with subtle border glow */
  --shadow-card: 
    0 0 0 1px rgb(0 0 0 / 0.03),
    0 2px 4px rgb(0 0 0 / 0.04),
    0 4px 8px rgb(0 0 0 / 0.04);
  --shadow-card-hover: 
    0 0 0 1px rgb(0 0 0 / 0.04),
    0 4px 8px rgb(0 0 0 / 0.06),
    0 8px 16px rgb(0 0 0 / 0.06);

  /* Input focus ring */
  --shadow-focus: 0 0 0 3px color-mix(in oklch, var(--color-primary) 15%, transparent);
}

/* ==========================================================================
   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: light-dark(oklch(0.92 0.026 254), oklch(0.3 0.05 254));
  --lexxy-color-selected-hover: light-dark(oklch(0.88 0.026 254), oklch(0.35 0.08 254));
  --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: light-dark(oklch(0.88 0.026 254), oklch(0.35 0.1 254));
  --lexxy-color-accent-lightest: light-dark(oklch(0.92 0.026 254), oklch(0.25 0.05 254));

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