/**
 * Renovate AI Design System Tokens & CSS Variables
 * 
 * Rules:
 * 1. Primary: Sage Green (#4A6B5D) — Architectural foundation, brand headers, calm structure.
 * 2. AI Accent: Electric Blue (#0066FF) — Reserved EXCLUSIVELY for AI actions and primary CTAs.
 * 3. Backgrounds: Light BG (#F7FAF8) and Dark BG (#121816).
 * 4. Languages: FI (primary/default) and EN supported.
 */

:root {
  /* === Primary: Sage Green === */
  --color-primary: #4A6B5D;
  --color-primary-light: #6E9383;
  --color-primary-dark: #2E4E41;
  --color-sage: #4A6B5D;
  --color-sage-light: #6E9383;
  --color-sage-dark: #2E4E41;
  --color-sage-container: #E5EDE8;
  --color-on-sage: #FFFFFF;
  --color-on-sage-container: #0F261C;

  /* === AI Accent: Electric Blue (Exclusive to AI Actions & Primary CTAs) === */
  --color-ai-accent: #0066FF;
  --color-electric-blue: #0066FF;
  --color-electric-blue-light: #3385FF;
  --color-electric-blue-dark: #004ECC;
  --color-electric-blue-container: #E5EFFF;
  --color-on-ai-accent: #FFFFFF;
  --color-cta-primary: #0066FF;

  /* === Light Theme Neutrals === */
  --color-bg: #F7FAF8;
  --color-bg-light: #F7FAF8;
  --color-surface: #FFFFFF;
  --color-surface-variant: #EBF1ED;
  --color-card: #FFFFFF;
  --color-text: #18221D;
  --color-text-secondary: #5E6D66;
  --color-text-tertiary: #8A9A92;
  --color-border: #DCE5E0;
  --color-divider: #E8EFEA;

  /* === Status Colors === */
  --color-success: #2E7D32;
  --color-warning: #ED6C02;
  --color-error: #D32F2F;
  --color-info: #0288D1;

  /* === Typography & Radii === */
  --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Shadows & AI Glows === */
  --shadow-ai-glow: 0 4px 16px rgba(0, 102, 255, 0.35);
  --shadow-ai-glow-sm: 0 2px 8px rgba(0, 102, 255, 0.25);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* === Dark Mode Variables === */
[data-theme="dark"],
.dark {
  --color-bg: #121816;
  --color-bg-dark: #121816;
  --color-surface: #19231F;
  --color-surface-variant: #283832;
  --color-card: #202D28;
  --color-text: #F4F8F5;
  --color-text-secondary: #9CB0A6;
  --color-text-tertiary: #6A7F76;
  --color-border: #2E3F38;
  --color-divider: #23302B;

  --color-sage-container: #1F332A;
  --color-on-sage-container: #D4E3DB;

  --color-electric-blue-container: #0C2448;
  --shadow-ai-glow: 0 4px 20px rgba(0, 102, 255, 0.5);
}

/* === Base HTML/Body === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === AI Action & Primary CTA Rule Classes === */
.ai-primary-cta {
  background-color: var(--color-cta-primary) !important;
  color: #FFFFFF !important;
  box-shadow: var(--shadow-ai-glow);
  transition: all 0.2s ease-in-out;
}

.ai-primary-cta:hover {
  background-color: var(--color-electric-blue-dark) !important;
  box-shadow: 0 6px 20px rgba(0, 102, 255, 0.45);
  transform: translateY(-1px);
}

.ai-badge {
  background-color: var(--color-electric-blue-container);
  color: var(--color-electric-blue);
  border: 1px solid rgba(0, 102, 255, 0.3);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sage-brand-header {
  background-color: var(--color-sage);
  color: #FFFFFF;
}