/* Root theme tokens and layout constants */
:root {
  --background: hsl(220, 15%, 8%);
  --background-secondary: hsl(220, 15%, 12%);
  --background-tertiary: hsl(220, 12%, 16%);
  --foreground: hsl(210, 40%, 98%);
  --sidebar-w: 400px;
  
  /* Glass Effects */
  --card: hsl(220, 15%, 12%, 0.8);
  --card-foreground: hsl(210, 40%, 95%);
  --card-border: hsl(220, 20%, 25%, 0.4);
  --popover: hsl(220, 15%, 10%, 0.95);
  --popover-foreground: hsl(210, 40%, 95%);
  
  /* Primary Colors */
  --primary: hsl(210, 85%, 55%);
  --primary-glow: hsl(210, 90%, 65%);
  --primary-dark: hsl(210, 80%, 45%);
  --primary-foreground: hsl(210, 40%, 98%);
  
  /* Secondary Colors */
  --secondary: hsl(220, 15%, 20%);
  --secondary-foreground: hsl(210, 40%, 95%);
  --secondary-hover: hsl(220, 15%, 25%);
  --accent: hsl(280, 70%, 55%);
  --accent-glow: hsl(280, 80%, 65%);
  --accent-foreground: hsl(210, 40%, 98%);
  
  /* Neutral Colors */
  --muted: hsl(220, 15%, 18%);
  --muted-foreground: hsl(220, 10%, 65%);
  --muted-hover: hsl(220, 15%, 22%);
  
  /* Borders */
  --border: hsl(220, 20%, 25%, 0.6);
  --border-hover: hsl(220, 25%, 35%, 0.8);
  --input: hsl(220, 15%, 16%);
  --input-border: hsl(220, 20%, 30%);
  --ring: hsl(210, 85%, 55%, 0.3);
  
  /* Glass & Blur */
  --glass-bg: hsl(220, 15%, 10%, 0.7);
  --glass-border: hsl(220, 30%, 40%, 0.3);
  --blur-strong: blur(20px) saturate(150%);
  --blur-medium: blur(12px) saturate(120%);
  --blur-light: blur(8px) saturate(110%);
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(210, 85%, 55%), hsl(280, 70%, 55%));
  --gradient-background: radial-gradient(ellipse at top, hsl(220, 15%, 12%), hsl(220, 15%, 8%));
  --gradient-glass: linear-gradient(145deg, hsl(220, 15%, 15%, 0.8), hsl(220, 15%, 10%, 0.6));
  --gradient-canvas: radial-gradient(circle at 50% 50%, hsl(210, 31%, 15%), hsl(210, 23%, 9%) 80%);
  
  /* Layout */
  --tabs-height: 52px;
  --mobile-panel-height: 45vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --action-bar-h: 64px;
  --header-h: 64px;

  /* Spacing scale (4px grid + key mids) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 32px;
  --space-13: 36px;
  --space-14: 40px;
  --space-15: 48px;
  --space-16: 56px;
  --space-17: 64px;

  /* Radius scale */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --radius-round: 999px;

  /* Typography scale */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-xxs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 16px;
  --text-2xl: 18px;
  --text-3xl: 20px;
  --text-4xl: 22px;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  /* Z-index layers */
  --z-canvas: 50;
  --z-hotspots: 70;
  --z-actionbar: 120;
  --z-sidebar: 500;
  --z-header: 1000;
  --z-modal: 9999;

  /* Semantic UI tokens */
  /* Buttons */
  --btn-height: var(--space-13);
  --btn-pad-y: var(--space-3);
  --btn-pad-x: var(--space-5);
  --btn-radius: var(--radius-lg);
  --btn-font: var(--text-sm);
  --btn-gap: var(--space-3);
  --btn-icon: var(--space-7);

  --btn-sm-pad-y: var(--space-2);
  --btn-sm-pad-x: var(--space-4);
  --btn-sm-radius: var(--radius-sm);
  --btn-sm-font: var(--text-xs);

  /* Cards / list items */
  --card-radius-lg: var(--radius-2xl);
  --card-radius-md: var(--radius-lg);
  --card-gap: var(--space-5);
  --card-pad: var(--space-7);

  /* Panels / popovers */
  --panel-radius: var(--radius-lg);
  --panel-pad-x: var(--space-7);
  --panel-pad-y: var(--space-5);
  --panel-gap: var(--space-4);

  /* Tabs / pills */
  --tab-bar-pad: var(--space-6);
  --tab-pill-radius: var(--radius-round);
  --tab-pill-pad: var(--space-3);
  --tab-pill-font: var(--text-sm);

  /* Hotspots / labels */
  --hotspot-radius: var(--radius-xs);
  --hotspot-pad-y: var(--space-1);
  --hotspot-pad-x: var(--space-3);
  --hotspot-font: var(--text-md);

  /* Swatches / indicators */
  --swatch-size: 50px;
  --indicator-size: 22px;

  /* Chevrons */
  --chevron-size: var(--space-4);
  --chevron-tri-base: 5px;
  --chevron-tri-height: 7px;

  /* Semantic shadows */
  --shadow-card: 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-action-active: 0 10px 24px rgba(10, 170, 255, 0.18);
  --shadow-hotspot-base: 0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-hotspot-glow-weak: 0 0 0 0 rgba(255, 184, 86, 0.22);
  --shadow-hotspot-glow-strong: 0 0 14px 10px rgba(255, 184, 86, 0.36);
  
  /* Shadows */
  --shadow-soft: 0 4px 16px hsl(220, 15%, 5%, 0.3);
  --shadow-medium: 0 8px 32px hsl(220, 15%, 5%, 0.4);
  --shadow-strong: 0 8px 32px hsl(220, 15%, 5%, 0.5);
  --shadow-glow: 0 0 20px hsl(210, 85%, 55%, 0.3);
  --shadow-accent-glow: 0 0 15px hsl(280, 70%, 55%, 0.4);
  
  /* Transitions */
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ================================
   RESPONSIVE BREAKPOINTS
   ================================
   - Desktop: > 1200px
   - Tablet Landscape: 1025px - 1200px
   - Tablet Portrait: 700px - 1024px
   - Phone Landscape: < 1024px + landscape
   - Phone Portrait: < 700px
   ================================ */

/* Tablet Landscape */
@media (max-width: 1200px) {
  :root {
    --sidebar-w: 320px;
  }
}

/* Tablet Portrait */
@media (max-width: 1024px) and (orientation: portrait) {
  :root {
    --sidebar-w: 100%;
    --header-h: 64px;
    --action-bar-h: 64px;
    --mobile-panel-height: 50vh;
  }
}

/* Phone Portrait */
@media (max-width: 699px) and (orientation: portrait) {
  :root {
    --sidebar-w: 100%;
    --header-h: 56px;
    --action-bar-h: 56px;
    --mobile-panel-height: 55vh;
  }
}

/* Phone Landscape */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --header-h: 48px;
    --action-bar-h: 48px;
    --sidebar-w: 280px;
  }
}