/**
 * Ben Live TV - Design Tokens
 * Shared CSS custom properties for colors, spacing, shadows, and typography
 * Mobile-first responsive design using modern CSS features
 */

/* ============================================================================
   Color System
   ============================================================================ */

:root {
  /* Dark Neutral Gray Foundation (warmer, less black) */
  --gray-950: #22252b;  /* Lightened from #1a1d23 */
  --gray-900: #2a2e35;  /* Lightened from #22262e */
  --gray-800: #32373f;  /* Lightened from #2a2f38 */
  --gray-700: #353a45;
  --gray-600: #464b57;

  /* Rainbow Accents (HDR-compatible using oklch color space) */
  --accent-red: oklch(65% 0.25 25);
  --accent-orange: oklch(75% 0.20 65);
  --accent-yellow: oklch(85% 0.18 95);
  --accent-green: oklch(70% 0.22 145);
  --accent-cyan: oklch(75% 0.18 195);
  --accent-blue: oklch(65% 0.22 245);
  --accent-purple: oklch(65% 0.25 295);

  /* Primary colors (green for main actions) */
  --primary: var(--accent-green);
  --primary-light: oklch(75% 0.22 145);
  --secondary: var(--accent-blue);
  --secondary-light: oklch(70% 0.22 245);

  /* Text colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;

  /* Surface colors with light/shadow emphasis */
  --bg-dark: var(--gray-950);
  --bg-card: rgba(26, 31, 38, 0.6);
  --light-subtle: rgba(255, 255, 255, 0.05);
  --shadow-deep: rgba(0, 0, 0, 0.6);
  --border: rgba(148, 163, 184, 0.1);
}

/* Light theme overrides */
html[data-theme="light"] {
  --gray-950: #f8fafc;
  --gray-900: #f1f5f9;
  --gray-800: #e2e8f0;
  --gray-700: #cbd5e1;
  --gray-600: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --bg-dark: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.9);
  --light-subtle: rgba(15, 23, 42, 0.04);
  --shadow-deep: rgba(15, 23, 42, 0.15);
  --border: rgba(15, 23, 42, 0.12);
}

/* Enhanced chroma for HDR displays */
@supports (color: oklch(0% 0 0)) {
  :root {
    --accent-red: oklch(65% 0.30 25);
    --accent-orange: oklch(75% 0.25 65);
    --accent-yellow: oklch(85% 0.22 95);
    --accent-green: oklch(70% 0.26 145);
    --accent-cyan: oklch(75% 0.22 195);
    --accent-blue: oklch(65% 0.26 245);
    --accent-purple: oklch(65% 0.30 295);
  }
}

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

:root {
  /* Fluid spacing using clamp() - increased max values for UHD breathing room */
  --space-xs: clamp(0.5rem, 1.2vw, 0.9rem);
  --space-sm: clamp(0.75rem, 1.8vw, 1.3rem);
  --space-md: clamp(1rem, 2.5vw, 2rem);
  --space-lg: clamp(1.5rem, 3.5vw, 3.2rem);
  --space-xl: clamp(2rem, 5vw, 4.5rem);
  --space-2xl: clamp(3rem, 7vw, 6.5rem);
  --space-3xl: clamp(4rem, 9vw, 9rem);

  /* Container constraints */
  --container-max-width: 1100px;
  --container-padding: clamp(1rem, 3vw, 2rem);
}

@media (min-width: 1600px) {
  :root {
    --container-max-width: 1420px;
    --container-padding: clamp(1.2rem, 1.7vw, 2.5rem);
  }
}

@media (min-width: 2200px) {
  :root {
    --container-max-width: 1880px;
    --container-padding: clamp(1.45rem, 1.5vw, 3.2rem);
  }
}

@media (min-width: 3200px) {
  :root {
    --container-max-width: 2440px;
    --container-padding: clamp(1.6rem, 1.35vw, 3.8rem);
  }
}

@media (min-width: 1920px) {
  html {
    /* Increased from 18px to 19px for better HD readability */
    font-size: 19px;
  }
}

@media (min-width: 2560px) {
  html {
    /* Increased from 21px to 23px for UHD viewing distance */
    font-size: 23px;
  }
}

@media (min-width: 3200px) {
  html {
    /* Increased from 24px to 27px for 4K+ displays */
    font-size: 27px;
  }
}

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

:root {
  /* Fluid typography using clamp() - scales from 320px to 4K */
  --font-xs: clamp(0.75rem, 1.5vw, 0.875rem);
  --font-sm: clamp(0.875rem, 1.75vw, 1rem);
  --font-base: clamp(1rem, 2vw, 1.125rem);
  --font-lg: clamp(1.125rem, 2.25vw, 1.25rem);
  --font-xl: clamp(1.25rem, 2.5vw, 1.5rem);
  --font-2xl: clamp(1.5rem, 3vw, 2rem);
  --font-3xl: clamp(2rem, 4vw, 3rem);
  --font-4xl: clamp(2.5rem, 5vw, 4rem);
  --font-5xl: clamp(3rem, 6vw, 5rem);

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

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;
}

/* ============================================================================
   Shadow System
   ============================================================================ */

:root {
  /* Elevation shadows - progressive depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

  /* Glass effect shadows (used with backdrop-filter) */
  --shadow-glass:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);

  /* Colored shadows for accents */
  --shadow-primary: 0 0 40px rgba(16, 185, 129, 0.3);
  --shadow-secondary: 0 0 40px rgba(59, 130, 246, 0.3);
}

/* ============================================================================
   Border Radius
   ============================================================================ */

:root {
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;   /* Pill shape */
}

/* ============================================================================
   Z-Index Scale
   ============================================================================ */

:root {
  --z-background: -1;
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
}

/* ============================================================================
   Transitions & Timing
   ============================================================================ */

:root {
  /* Duration */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* Easing functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  /* Organic easing — used by landing.css and blog.css for natural-feeling transitions */
  --organic-ease: cubic-bezier(0.22, 0.82, 0.3, 1);
  --organic-ease-soft: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ============================================================================
   Breakpoints (for reference - use in media queries)
   ============================================================================ */

/*
  Mobile:  320px - 639px
  Tablet:  640px - 1023px
  Desktop: 1024px - 1439px
  Wide:    1440px+

  Standard breakpoints:
  @media (max-width: 640px)  - Mobile
  @media (min-width: 640px)  - Tablet and up
  @media (min-width: 768px)  - iPad portrait and up
  @media (min-width: 1024px) - Desktop and up
  @media (min-width: 1440px) - Wide screens
*/

/* ============================================================================
   Container Query Tokens (Modern Component-Based Responsive Design)
   ============================================================================ */

:root {
  /* Container query breakpoints (for component-based responsiveness) */
  /* Use with @container queries instead of @media queries */
  --cq-xs: 280px;   /* Micro containers */
  --cq-sm: 320px;   /* Small mobile */
  --cq-md: 480px;   /* Large mobile / small tablet */
  --cq-lg: 640px;   /* Tablet portrait */
  --cq-xl: 768px;   /* Tablet landscape */
  --cq-2xl: 1024px; /* Desktop */
}

/* ============================================================================
   Modern Viewport Units (Mobile Keyboard Safe)
   ============================================================================ */

:root {
  /* Dynamic viewport height - accounts for mobile browser chrome and keyboard
     Falls back to vh for older browsers */
  --viewport-height: 100vh;
  --viewport-height-small: 100vh;  /* svh - smallest possible viewport */
  --viewport-height-large: 100vh;  /* lvh - largest possible viewport */
  --viewport-height-dynamic: 100vh; /* dvh - current dynamic viewport */

  /* Keyboard offset (set dynamically by JavaScript) */
  --kbd: 0px;
}

/* Modern viewport units for supporting browsers */
@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
    --viewport-height-dynamic: 100dvh;
  }
}

@supports (height: 100svh) {
  :root {
    --viewport-height-small: 100svh;
  }
}

@supports (height: 100lvh) {
  :root {
    --viewport-height-large: 100lvh;
  }
}

/* ============================================================================
   Logical Properties (RTL/i18n Ready)
   ============================================================================ */

:root {
  /* Use these for start/end instead of left/right for RTL support */
  --inline-start: left;
  --inline-end: right;
  --block-start: top;
  --block-end: bottom;
}

/* RTL override (when html[dir="rtl"]) */
html[dir="rtl"] {
  --inline-start: right;
  --inline-end: left;
}

/* ============================================================================
   Aspect Ratios
   ============================================================================ */

:root {
  /* Common aspect ratios for images and containers */
  --ratio-square: 1 / 1;
  --ratio-video: 16 / 9;
  --ratio-portrait: 3 / 4;
  --ratio-landscape: 4 / 3;
  --ratio-cinema: 21 / 9;
  --ratio-golden: 1.618 / 1;
}

/* ============================================================================
   Touch & Accessibility Targets
   ============================================================================ */

:root {
  /* WCAG 2.5.5 Level AAA touch target minimums */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* Focus ring styling */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--primary);
}

/* ============================================================================
   Safe Area Insets (Notch/Dynamic Island)
   ============================================================================ */

:root {
  /* iOS safe area insets - fallback to 0 for non-notched devices */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ============================================================================
   Content Width Constraints
   ============================================================================ */

:root {
  /* Max content widths for readability */
  --content-xs: 20rem;   /* 320px - tight content */
  --content-sm: 32rem;   /* 512px - narrow content */
  --content-md: 48rem;   /* 768px - readable text */
  --content-lg: 64rem;   /* 1024px - wide content */
  --content-xl: 80rem;   /* 1280px - full width content */
  --content-max: 90rem;  /* 1440px - maximum container */

  /* Optimal reading width (45-75 characters) */
  --prose-width: 65ch;
}