:root {
  /* =================================
     COLOR PALETTE - Modern Deep Dark
     ================================= */
  /* Base Layers */
  --c-background: #09090b;       /* Deepest black/bg */
  --c-surface: #18181b;         /* Sidebar/Header bg */
  --c-surface-hover: #27272a;   /* Interactive hover state */
  --c-surface-active: #3f3f46;  /* Active/Selected state */
  --c-border: #27272a;          /* Subtle borders */
  --c-border-hover: #52525b;    /* Border on hover */

  /* Text Colors */
  --c-text-primary: #f4f4f5;    /* High emphasis */
  --c-text-secondary: #a1a1aa;  /* Medium emphasis */
  --c-text-tertiary: #71717a;   /* Low emphasis (placeholders) */

  /* Brand / Accent (Violet/Purple) */
  --c-primary: #8b5cf6;         /* Base Primary */
  --c-primary-hover: #a78bfa;   /* Lighter for hover */
  --c-primary-active: #7c3aed;  /* Deep for active/click */
  --c-primary-dark: #2e1065;    /* Backgrounds for primary items */
  --c-primary-ring: rgba(139, 92, 246, 0.5); /* Focus rings */

  /* Functional Colors */
  --c-danger: #ef4444;
  --c-danger-bg: rgba(239, 68, 68, 0.15);
  --c-success: #10b981;
  --c-success-bg: rgba(16, 185, 129, 0.15);

  /* =================================
     DIMENSIONS & SHAPE
     ================================= */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size: 14px; /* Slightly smaller base for density */

  /* =================================
     SHADOWS & DEPTH
     ================================= */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 15px rgba(139, 92, 246, 0.15);

  /* Component Defaults */
  --coverWidth: 280px;
  --coverHeight: 158px;
  --posterWidth: 160px;
  --posterHeight: 240px;
  --slotWidth: 160px;
  --slotHeight: 240px;

  /* Sidebars (Initial widths) */
  --leftSideW: 280px;
  --rightSideW: 320px;

  --canvasBarsH: 62.1875px;
}