:root {
  /* ==========================================================================
     BRAND GUIDELINES (Adapted from Extension UI)
     ========================================================================== */

  /* --------------------------------------------------------------------------
     1. COLORS (Tokens)
     -------------------------------------------------------------------------- */
  
  /* Brand Palette */
  --brand-red: #dc2626;      /* Logo Red - Darker */
  --brand-blue: #3b82f6;     /* Technical Blue */
  --brand-green: #22c55e;    /* Success */
  --brand-yellow: #eab308;   /* Warning */

  /* Backgrounds (Dark Theme Default) */
  --bg-base: #090B0D;        /* Deepest black (Extension match) */
  --bg-surface: #16181d;     /* Panel background */
  --bg-elevated: #1d2026;    /* Card/Modal background */
  --bg-hover: #2a2a2f;

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0; /* Slightly lighter than extension for web readability */
  --text-muted: #64748b;
  --text-disabled: #3a3a3f;

  /* Borders */
  --border-default: #3a3a3f;
  --border-subtle: #2a2a2f;
  --border-strong: #52525b;

  /* Accents - Switching to Primary Brand Red */
  --accent-color: var(--brand-red);
  --accent-glow: rgba(220, 38, 38, 0.4);
  --accent-hover: #b91c1c;
  
  /* Semantic */
  --color-error: var(--brand-red);
  --color-warning: var(--brand-yellow);
  --color-success: var(--brand-green);

  /* --------------------------------------------------------------------------
     2. TYPOGRAPHY (Inter + JetBrains Mono)
     -------------------------------------------------------------------------- */
  
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Web Scale (Larger than Extension) */
  --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: 2rem;     /* 32px */
  --text-4xl: 2.5rem;   /* 40px */
  --text-hero: clamp(3rem, 6vw, 5rem);

  /* Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 600;

  /* --------------------------------------------------------------------------
     3. SPACING (4px Grid)
     -------------------------------------------------------------------------- */
  
  --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-32: 8rem;    /* 128px */
  
  /* Aliases for Layout */
  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-8);
  --space-lg: var(--space-16);
  --space-xl: var(--space-32);

  /* --------------------------------------------------------------------------
     4. COMPONENT TOKENS
     -------------------------------------------------------------------------- */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
}