/* =============================================================================
   POLAR LIGHT STUDIO — Design Tokens
   =============================================================================
   Single source of truth for colors, typography, spacing, and effects.
   All other CSS files reference these variables.
============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Colors — Polar Light Theme
     Arctic night sky: deep navy base, ice blue accents, aurora touches
  --------------------------------------------------------------------------- */
  
  /* Base palette */
  --color-bg-primary: #0f172a;       /* Deep navy - main background */
  --color-bg-secondary: #1e293b;     /* Slate - cards, elevated surfaces */
  --color-bg-tertiary: #334155;      /* Lighter slate - hover states, borders */
  
  /* Accent - Ice Blue spectrum */
  --color-accent: #7dd3fc;           /* Ice blue - primary accent */
  --color-accent-dim: #38bdf8;       /* Deeper blue - hover states */
  --color-accent-bright: #a5f3fc;    /* Bright cyan - highlights */
  --color-accent-glow: rgba(125, 211, 252, 0.15);  /* Subtle glow effect */
  --color-accent-glow-strong: rgba(125, 211, 252, 0.3);  /* Stronger glow */
  
  /* Aurora colors - for gradients and accents */
  --color-aurora-blue: #38bdf8;
  --color-aurora-cyan: #22d3ee;
  --color-aurora-teal: #2dd4bf;
  --color-aurora-green: #4ade80;
  --color-aurora-purple: #a78bfa;
  
  /* Text */
  --color-text-primary: #f1f5f9;     /* Near-white - headings, important text */
  --color-text-secondary: #94a3b8;   /* Muted - body text, descriptions */
  --color-text-tertiary: #64748b;    /* Dim - captions, metadata */
  
  /* Semantic */
  --color-success: #4ade80;          /* Green - live/available states */
  --color-success-dim: #22c55e;      /* Darker green - hover */
  --color-warning: #fbbf24;          /* Amber - maintenance, caution */
  --color-error: #f87171;            /* Red - errors, retired states */
  --color-inactive: #475569;         /* Gray - unavailable, disabled */
  
  /* Borders */
  --color-border: rgba(148, 163, 184, 0.1);       /* Subtle dividers */
  --color-border-hover: rgba(148, 163, 184, 0.2); /* Hover state borders */
  --color-border-glow: rgba(125, 211, 252, 0.3);  /* Glowing border */
  
  /* ---------------------------------------------------------------------------
     Typography
  --------------------------------------------------------------------------- */
  
  /* Font families */
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Font sizes - using a modular scale (1.25 ratio) */
  --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 */
  --text-5xl: 3rem;        /* 48px */
  
  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* ---------------------------------------------------------------------------
     Spacing — 4px base unit
  --------------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --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 */
  
  /* ---------------------------------------------------------------------------
     Layout
  --------------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: var(--space-6);
  
  /* ---------------------------------------------------------------------------
     Effects
  --------------------------------------------------------------------------- */
  
  /* Border radius */
  --radius-sm: 0.25rem;   /* 4px - subtle rounding */
  --radius-md: 0.5rem;    /* 8px - cards, buttons */
  --radius-lg: 0.75rem;   /* 12px - larger cards */
  --radius-xl: 1rem;      /* 16px - modals, featured items */
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px var(--color-accent-glow);
  --shadow-glow-strong: 0 0 30px var(--color-accent-glow-strong);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* ---------------------------------------------------------------------------
     Z-index scale
  --------------------------------------------------------------------------- */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ---------------------------------------------------------------------------
   Animations — Keyframes
--------------------------------------------------------------------------- */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px var(--color-accent-glow);
  }
  50% {
    box-shadow: 0 0 20px var(--color-accent-glow-strong);
  }
}

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

@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 float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}