/* ============================================
   UI Kit Design Tokens
   Self-contained CSS variables for the UI Kit.
   Eliminates dependency on patterns.css.
   Dark theme as default, light theme overrides.
   ============================================ */

:root {
  /* ----------------------------------------
     Brand Colors
     ---------------------------------------- */
  --vvm-cyan: #05F2F2;
  --vvm-teal: #03A6A6;
  --vvm-dark-teal: #014040;
  --vvm-bright: #05F2DB;
  --vvm-black: #0D0D0D;

  /* ----------------------------------------
     Typography
     ---------------------------------------- */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ----------------------------------------
     Colors - Backgrounds (Dark)
     ---------------------------------------- */
  --color-bg-primary: #0D0D0D;
  --color-bg-secondary: #141414;
  --color-bg-tertiary: #1A1A1A;
  --color-bg-elevated: #222222;
  --color-bg-hover: #1F1F1F;
  --color-bg-active: rgba(5, 242, 242, 0.1);

  /* ----------------------------------------
     Colors - Text (Dark)
     ---------------------------------------- */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A0A0A0;
  --color-text-muted: #666666;

  /* ----------------------------------------
     Colors - Borders (Dark)
     ---------------------------------------- */
  --color-border-default: #2A2A2A;
  --color-border-light: #1F1F1F;

  /* ----------------------------------------
     Colors - Accents
     ---------------------------------------- */
  --color-accent-primary: #05F2F2;
  --color-accent-primary-hover: #05F2DB;
  --color-accent-secondary: #03A6A6;

  /* ----------------------------------------
     Border Radius
     ---------------------------------------- */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */

  /* ----------------------------------------
     Shadows (Dark - Higher Opacity)
     ---------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);

  /* ----------------------------------------
     Shadow Aliases
     ---------------------------------------- */
  --shadow-card: var(--shadow-sm);
  --shadow-elevated: var(--shadow-lg);

  /* ----------------------------------------
     Semantic Colors
     ---------------------------------------- */
  --ui-success: #4ade80;
  --ui-success-light: rgba(22, 163, 74, 0.1);
  --ui-warning: #fbbf24;
  --ui-warning-light: rgba(245, 158, 11, 0.1);
  --ui-danger: #f87171;
  --ui-danger-hover: #dc2626;
  --ui-danger-light: rgba(220, 38, 38, 0.1);
  --ui-info: #60a5fa;
  --ui-info-light: rgba(59, 130, 246, 0.1);

  /* ----------------------------------------
     UI Kit Aliases
     ---------------------------------------- */
  --color-brand: var(--color-accent-primary);
  --color-brand-hover: var(--color-accent-primary-hover);
  --color-brand-subtle: var(--color-bg-active);
  --color-bg: var(--color-bg-primary);
  --color-text: var(--color-text-primary);
  --color-border: var(--color-border-default);

  /* ----------------------------------------
     Glow Effects (Dark)
     ---------------------------------------- */
  --glow-accent-sm: 0 0 10px rgba(5, 242, 242, 0.2);
}


/* ============================================
   Light Theme Overrides
   ============================================ */
[data-theme="light"] {
  /* Backgrounds */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F9FAFB;
  --color-bg-tertiary: #F3F4F6;
  --color-bg-elevated: #E5E7EB;
  --color-bg-hover: #F3F4F6;
  --color-bg-active: rgba(8, 145, 178, 0.08);

  /* Text */
  --color-text-primary: #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted: #9CA3AF;

  /* Borders */
  --color-border-default: #E5E7EB;
  --color-border-light: #F3F4F6;

  /* Accents */
  --color-accent-primary: #0891B2;
  --color-accent-primary-hover: #0E7490;
  --color-accent-secondary: #0E7490;

  /* Shadows - Lower opacity for light */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

  /* Shadow Aliases */
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Semantic Colors */
  --ui-success: #22C55E;
  --ui-success-light: rgba(34, 197, 94, 0.15);
  --ui-warning: #F59E0B;
  --ui-warning-light: rgba(245, 158, 11, 0.15);
  --ui-danger: #EF4444;
  --ui-danger-hover: #DC2626;
  --ui-danger-light: rgba(239, 68, 68, 0.15);
  --ui-info: #3B82F6;
  --ui-info-light: rgba(59, 130, 246, 0.15);

  /* UI Kit Aliases */
  --color-brand: var(--color-accent-primary);
  --color-brand-hover: var(--color-accent-secondary);
  --color-brand-subtle: rgba(3, 166, 166, 0.1);
  --color-bg: #FFFFFF;
  --color-text: #111827;
  --color-border: #E5E7EB;

  /* Glow - Muted for light */
  --glow-accent-sm: 0 0 10px rgba(8, 145, 178, 0.1);
}