/*
 * Cortex Global Styles
 * CSS Layers, Design Tokens, and Dark Mode
 *
 * Following Fizzy 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 (Tailwind-derived)
   Ready-to-use color values: var(--color-blue-500)
   ========================================================================== */

: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 */
  --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);

  /* Sky */
  --color-sky-50:  oklch(0.977 0.013 236.62);
  --color-sky-100: oklch(0.951 0.026 236.824);
  --color-sky-200: oklch(0.901 0.058 230.902);
  --color-sky-400: oklch(0.746 0.16 232.661);
  --color-sky-600: oklch(0.588 0.158 241.966);
  --color-sky-950: oklch(0.293 0.066 243.157);

  /* Green */
  --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 */
  --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 */
  --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);

  /* Yellow */
  --color-yellow-200: oklch(0.945 0.129 101.54);
  --color-yellow-900: oklch(0.421 0.095 57.708);
}

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

:root {
  /* Canvas & Surface */
  /* Light: gray-50 (#f9fafb), Dark: gray-900 (#111827) - for page background */
  /* TSX: theme.card = darkMode ? 'bg-gray-800' : 'bg-white' */
  --color-canvas: light-dark(#f9fafb, #111827);
  --color-surface: light-dark(white, #1f2937);
  --color-surface-raised: light-dark(white, #374151);
  --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-faint: 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-zinc-900), var(--color-zinc-50));
  --color-primary-hover: light-dark(var(--color-zinc-800), var(--color-zinc-200));

  /* 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 */
  --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));

  /* State: Negative */
  --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));

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

  /* State: Warning */
  --color-warning: light-dark(var(--color-amber-600), var(--color-amber-500));
  --color-warning-muted: light-dark(var(--color-amber-100), var(--color-amber-950));
  --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-muted: light-dark(var(--color-blue-100), var(--color-blue-950));
  --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));

  /* State: Selected/Highlight */
  --color-selected: light-dark(var(--color-sky-100), var(--color-sky-950));
  --color-highlight: light-dark(var(--color-yellow-200), var(--color-yellow-900));

  /* Brand: Basecamp */
  --color-basecamp: light-dark(var(--color-sky-600), var(--color-sky-400));
  --color-basecamp-canvas: light-dark(var(--color-sky-50), var(--color-sky-950));
}

/* ==========================================================================
   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 */

  /* Semantic spacing */
  --inline-space: var(--space-4);
  --inline-space-half: var(--space-2);
  --inline-space-double: var(--space-8);
  --block-space: var(--space-4);
  --block-space-half: var(--space-2);
  --block-space-double: var(--space-8);
}

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

:root {
  /* Font families */
  --font-sans: "Recursive", 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 — aliased to the redesign type ramp in redesign/tokens.css
     so legacy and rd-prefixed tokens share a single source of truth. */
  --text-2xs:  var(--rd-text-2xs);
  --text-xs:   var(--rd-text-xs);
  --text-sm:   var(--rd-text-sm);
  --text-base: var(--rd-text-base);
  --text-md:   var(--rd-text-md);
  --text-lg:   var(--rd-text-lg);
  --text-xl:   var(--rd-text-xl);
  --text-2xl:  var(--rd-text-2xl);
  --text-3xl:  var(--rd-text-3xl);
  --text-4xl:  var(--rd-text-3xl);

  /* 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:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;
}

/* ==========================================================================
   Shadows
   ========================================================================== */

:root {
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   Opacity
   ========================================================================== */

:root {
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
}

/* ==========================================================================
   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 */

  /* Sticky element offsets — defined on :root so any sticky element can
     reference them regardless of DOM nesting. */
  --sticky-nav-height: 72px;
}

/* ==========================================================================
   Shared keyframes still used by animated components (toasts, spinners, etc.)
   ========================================================================== */

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

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

@keyframes bounce-dots {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-25%); }
}

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

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