/*
 * 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, frappe-gantt, 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)
   Using raw values so we can manipulate alpha: oklch(var(--lch-blue) / 0.5)
   ========================================================================== */

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

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

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

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

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

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

  /* Yellow */
  --lch-yellow-200: 0.945 0.129 101.54;
  --lch-yellow-900: 0.421 0.095 57.708;
}

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

:root {
  /* Canvas & Surface */
  /* Light: amber-50, Dark: gray-900 (#111827) - for page background */
  /* TSX: theme.card = darkMode ? 'bg-gray-800' : 'bg-white' */
  --color-canvas: light-dark(oklch(0.99 0.02 85), #111827);
  --color-surface: light-dark(white, #1f2937);
  --color-surface-raised: light-dark(white, #374151);

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

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

  /* Primary action */
  --color-primary: light-dark(oklch(var(--lch-zinc-900)), oklch(var(--lch-zinc-50)));
  --color-primary-hover: light-dark(oklch(var(--lch-zinc-800)), oklch(var(--lch-zinc-200)));

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

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

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

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

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

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

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

  /* Brand: Basecamp */
  --color-basecamp: light-dark(oklch(var(--lch-sky-600)), oklch(var(--lch-sky-400)));
  --color-basecamp-canvas: light-dark(oklch(var(--lch-sky-50)), oklch(var(--lch-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: "Sour Gummy", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --font-display: "Bangers", cursive;

  /* 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
   Pop Art style uses sharp corners (0) for most elements
   ========================================================================== */

:root {
  --radius-none: 0;
  --radius-sm:   0;        /* Sharp corners for Pop Art */
  --radius-md:   0;        /* Sharp corners for Pop Art */
  --radius-lg:   0;        /* Sharp corners for Pop Art */
  --radius-xl:   0;        /* Sharp corners for Pop Art */
  --radius-2xl:  0;        /* Sharp corners for Pop Art */
  --radius-full: 9999px;   /* Keep for pills/avatars */
}

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

/* ==========================================================================
   POP ART DESIGN SYSTEM
   Bold, comic book-inspired design tokens
   ========================================================================== */

:root {
  /* === POP ART PRIMARY COLORS ===
     Saturated, vibrant colors inspired by comic books */
  --color-pow-red: oklch(0.63 0.24 25);
  --color-wham-blue: oklch(0.59 0.2 260);
  --color-zap-yellow: oklch(0.88 0.17 85);
  --color-kapow-pink: oklch(0.65 0.25 350);
  --color-boom-green: oklch(0.72 0.19 145);
  --color-whoosh-orange: oklch(0.70 0.18 45);

  /* Hover states (slightly darker) */
  --color-pow-red-hover: oklch(0.55 0.24 25);
  --color-wham-blue-hover: oklch(0.51 0.2 260);
  --color-zap-yellow-hover: oklch(0.80 0.17 85);
  --color-kapow-pink-hover: oklch(0.57 0.25 350);
  --color-boom-green-hover: oklch(0.64 0.19 145);
  --color-whoosh-orange-hover: oklch(0.62 0.18 45);

  /* === BORDER SYSTEM ===
     Heavy black borders for comic book effect
     TSX reference: borders are always "border-black" (#000) in both modes */
  --border-thin: 2px;
  --border-medium: 3px;
  --border-thick: 4px;
  --border-color: oklch(0% 0 0);  /* Pure black */
  
  /* Comic border: Always black - visible in both light and dark modes */
  --color-comic-border: #000000;

  /* === COMIC SHADOW SYSTEM ===
     Solid offset shadows (no blur) for that lifted comic panel effect
     Reference: theme.shadow = darkMode ? '#000' : '#1F2937' */
  --comic-shadow-color: light-dark(
    #1F2937,  /* gray-800 in light mode - matches reference */
    #000000   /* pure black in dark mode - matches reference */
  );
  --comic-shadow-sm: 2px 2px 0 var(--comic-shadow-color);
  --comic-shadow-md: 4px 4px 0 var(--comic-shadow-color);
  --comic-shadow-lg: 6px 6px 0 var(--comic-shadow-color);
  --comic-shadow-xl: 8px 8px 0 var(--comic-shadow-color);

  /* Hover state shadows (reduced offset) */
  --comic-shadow-sm-hover: 1px 1px 0 var(--comic-shadow-color);
  --comic-shadow-md-hover: 2px 2px 0 var(--comic-shadow-color);
  --comic-shadow-lg-hover: 4px 4px 0 var(--comic-shadow-color);

  /* === HALFTONE PATTERNS ===
     Classic comic book dot patterns */
  --halftone: radial-gradient(
    circle,
    light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.08)) 1px,
    transparent 1px
  );
  --halftone-size: 4px 4px;

  --halftone-light: radial-gradient(
    circle,
    oklch(100% 0 0 / 0.3) 2px,
    transparent 2px
  );
  --halftone-light-size: 8px 8px;

  /* Page background pattern (lined paper effect) */
  /* Defined separately for light/dark since light-dark() doesn't work with gradients */
  --page-pattern-light: repeating-linear-gradient(
    0deg,
    oklch(0.95 0.04 85) 0px,
    oklch(0.95 0.04 85) 2px,
    oklch(0.99 0.02 85) 2px,
    oklch(0.99 0.02 85) 20px
  );
  --page-pattern-dark: repeating-linear-gradient(
    0deg,
    oklch(0.21 0.02 264) 0px,
    oklch(0.21 0.02 264) 2px,
    oklch(0.27 0.02 264) 2px,
    oklch(0.27 0.02 264) 20px
  );
  --page-pattern: var(--page-pattern-light);

  /* === ANIMATION TOKENS === */
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;

  /* === FONT WEIGHTS (heavier for Pop Art) === */
  --font-black: 900;
}

/* ==========================================================================
   POP ART KEYFRAME ANIMATIONS
   ========================================================================== */

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

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@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; }
}

/* ==========================================================================
   Dark Mode Pattern Override
   light-dark() doesn't work with gradients, so we switch manually
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --page-pattern: var(--page-pattern-dark);
  }
}

html[data-theme="dark"] {
  --page-pattern: var(--page-pattern-dark);
}

html[data-theme="light"] {
  --page-pattern: var(--page-pattern-light);
}