/* Design Tokens — Theme: Azul Escuro Cinzento + Verde Claro Esmeralda
   Source: user-provided colors and UI/UX Pro Max skill patterns
   Primary (brand blue gray): #23333e (R35 G51 B62)
   Accent (emerald light):  #50b488 (R80 G180 B136)
*/

/* === PRIMITIVES === */
:root {
  /* Brand primitives */
  --primitive-brand-blue-500: #23333e; /* Original base */
  --primitive-brand-blue-900: #0a1114; /* Deepest background */
  --primitive-brand-blue-800: #121d24; /* Panel background */
  
  --primitive-emerald-500: #50b488;
  --primitive-emerald-glow: rgba(80, 180, 136, 0.4);
  --primitive-emerald-intense: #65dfaa;

  /* UI feedback colors */
  --color-danger: #ff4d4d;
  --color-danger-glow: rgba(255, 77, 77, 0.3);
  --color-warning: #ffb347;
  --color-warning-glow: rgba(255, 179, 71, 0.3);

  /* Glassmorphism helpers */
  --glass-bg: rgba(18, 29, 36, 0.7);
  --glass-border: rgba(80, 180, 136, 0.2);
  --glass-border-bright: rgba(80, 180, 136, 0.5);
  
  --shadow-glow-emerald: 0 0 15px var(--primitive-emerald-glow);
  --shadow-glow-danger: 0 0 15px var(--color-danger-glow);
  
  --radius-lg: 16px;
  --radius-md: 10px;
}

/* === SEMANTIC TOKENS (HIGH-TECH DARK) === */
:root {
  --color-background: var(--primitive-brand-blue-900);
  --color-foreground: #eef2f3;
  --color-surface: var(--primitive-brand-blue-800);
  --color-border: var(--glass-border);
  
  --color-primary: var(--primitive-emerald-500);
  --color-primary-hover: var(--primitive-emerald-intense);
  --color-primary-foreground: #0a1114;

  --color-accent: var(--primitive-emerald-intense);
  
  /* Indicators */
  --color-success: var(--primitive-emerald-500);
  --color-success-bg: rgba(80, 180, 136, 0.1);
  --color-error: var(--color-danger);
  --color-error-bg: rgba(255, 77, 77, 0.1);
  --color-warn: var(--color-warning);
  --color-warn-bg: rgba(255, 179, 71, 0.1);
}

/* === COMPONENT TOKENS === */
:root {
  --card-bg: var(--glass-bg);
  --card-border: var(--glass-border);
  --card-radius: var(--radius-lg);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  
  --input-bg: rgba(255, 255, 255, 0.05);
  --button-radius: 8px;
}

body {
  background-color: var(--color-background);
  background-image: 
    radial-gradient(circle at 0% 0%, rgba(80, 180, 136, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(35, 51, 62, 0.3) 0%, transparent 40%);
  background-attachment: fixed;
  color: var(--color-foreground);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100vh;
}