/* Theme Tokens - Design System Variables */
/* This file contains ONLY CSS custom properties (design tokens) and utility classes */
/* Component styling lives in enhancements.css */

/* ========================================
   BASE RESET
   ======================================== */

html,
body {
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Modern OKLCH Color System - "Warm Canvas"
   ======================================== */

:root {
  /* ========================================
     LIGHT MODE - "Warm Canvas"
     OKLCH provides perceptually uniform colors
     ======================================== */

  /* Background Layers */
  --color-bg-primary: oklch(98% 0.01 80);           /* Warm off-white base */
  --color-bg-secondary: oklch(95% 0.02 85);         /* Subtle cream surface */
  --color-surface-default: oklch(100% 0 0);         /* Pure white elevated */
  --color-surface-elevated: oklch(100% 0 0);        /* Pure white cards */

  /* Text Colors */
  --color-text-primary: oklch(25% 0.02 270);        /* Rich charcoal */
  --color-text-secondary: oklch(45% 0.02 270);      /* Medium gray */
  --color-text-tertiary: oklch(60% 0.01 270);       /* Light gray */
  --color-text-muted: oklch(70% 0.01 270);          /* Subtle gray */

  /* Accent Colors - Adjusted for AAA contrast (7:1) */
  --color-accent-primary: oklch(45% 0.18 25);       /* Darker burnt orange (was 55%) */
  --color-accent-secondary: oklch(45% 0.15 160);    /* Deep teal (passes AA) */
  --color-accent-tertiary: oklch(40% 0.20 320);     /* Darker deep rose (was 50%) */
  --color-accent-success: oklch(50% 0.14 155);      /* Forest green */
  --color-accent-warning: oklch(55% 0.17 65);       /* Amber */

  /* Cybersecurity Theme Accent Colors */
  --color-accent-cyan: oklch(50% 0.15 200);         /* Bright cyan */
  --color-accent-teal: oklch(50% 0.14 180);         /* Teal blue-green */
  --color-accent-green: oklch(55% 0.14 145);        /* Terminal green */
  --color-accent-amber: oklch(55% 0.17 65);         /* Amber (alias for warning) */

  /* Border Colors */
  --color-border-default: oklch(90% 0.01 270);
  --color-border-subtle: oklch(95% 0.01 270);

  /* Interactive States - Links - AAA contrast (7:1) */
  --color-link-default: oklch(45% 0.18 25);         /* Darker primary (was 55%) */
  --color-link-hover: oklch(40% 0.16 160);          /* Darker secondary */
  --color-link-active: oklch(40% 0.20 320);         /* Darker tertiary (was 50%) */
  --color-link-visited: oklch(40% 0.15 280);        /* Purple tint */

  /* Interactive States - Buttons - AAA contrast (7:1) */
  --color-button-primary-bg: oklch(45% 0.18 25);       /* Darker (was 55%) */
  --color-button-primary-hover: oklch(40% 0.20 25);    /* Darker hover */
  --color-button-primary-active: oklch(35% 0.22 25);   /* Darker active */
  --color-button-primary-text: oklch(98% 0.01 25);     /* Warm white on primary */

  --color-button-secondary-bg: oklch(45% 0.15 160);    /* Already passes AA */
  --color-button-secondary-hover: oklch(40% 0.17 160);
  --color-button-secondary-active: oklch(35% 0.19 160);
  --color-button-secondary-text: oklch(98% 0.01 160);  /* Cool white on secondary */

  --color-button-tertiary-bg: oklch(40% 0.20 320);     /* Much darker (was 50%) */
  --color-button-tertiary-hover: oklch(35% 0.22 320);  /* Darker hover */
  --color-button-tertiary-active: oklch(30% 0.24 320); /* Darker active */
  --color-button-tertiary-text: oklch(98% 0.01 320);   /* Pink-white on tertiary */

  /* Alert/Status Colors */
  --color-status-success: oklch(50% 0.14 155);
  --color-status-success-bg: oklch(95% 0.05 155);
  --color-status-warning: oklch(55% 0.17 65);
  --color-status-warning-bg: oklch(95% 0.05 65);
  --color-status-error: oklch(55% 0.20 25);
  --color-status-error-bg: oklch(95% 0.05 25);
  --color-status-info: oklch(45% 0.15 160);
  --color-status-info-bg: oklch(95% 0.05 160);

  /* Code Syntax Highlighting - Light Mode */
  --color-code-bg: oklch(96% 0.01 270);
  --color-code-text: oklch(30% 0.02 270);
  --color-code-comment: oklch(60% 0.01 270);
  --color-code-keyword: oklch(50% 0.20 320);
  --color-code-string: oklch(50% 0.14 155);
  --color-code-function: oklch(45% 0.15 160);
  --color-code-number: oklch(55% 0.18 25);
  --color-code-operator: oklch(45% 0.02 270);
  --color-code-variable: oklch(25% 0.02 270);

  /* Shadows - Soft for Light Mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0e7490 0%, #059669 100%);
  --gradient-accent: linear-gradient(135deg, #0d9488 0%, #0e7490 100%);

  /* Focus States */
  --color-focus-ring: #0e7490;
  --color-focus-ring-offset: #ffffff;

  /* Transitions */
  --transition-colors: color 300ms ease, background-color 300ms ease, border-color 300ms ease;
  --transition-transform: transform 300ms ease;
  --transition-opacity: opacity 300ms ease;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography System - Modern Font Stack
     Display/Headings: DM Sans (700-900) - geometric, modern
     Subheadings: Plus Jakarta Sans (600-700) - rounded, friendly
     Body: DM Sans (400-500) with 1.7 line-height
     Monospace: JetBrains Mono - ligatures, technical
     Feature text: Fraunces (600-700) for quotes - variable serif */

  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-subheading: 'Plus Jakarta Sans', 'DM Sans', -apple-system, sans-serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace;
  --font-feature: 'Fraunces', Georgia, Cambria, serif;

  /* Font weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Typography Scale - 1.25 ratio (14px to 69px) */
  --font-size-xs: 0.875rem;        /* 14px */
  --font-size-sm: 1.125rem;        /* 18px */
  --font-size-base: 1.375rem;      /* 22px */
  --font-size-md: 1.75rem;         /* 28px */
  --font-size-lg: 2.1875rem;       /* 35px */
  --font-size-xl: 2.75rem;         /* 44px */
  --font-size-2xl: 3.4375rem;      /* 55px */
  --font-size-3xl: 4.3125rem;      /* 69px */

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;      /* Body text */
  --line-height-loose: 2.0;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Legacy variable mappings for backward compatibility */
  --bg: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --fg: var(--color-text-primary);
  --fg-secondary: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --link: var(--color-link-default);
  --link-hover: var(--color-link-hover);
  --border: var(--color-border-default);
  --card: var(--color-surface-default);
  --accent: var(--color-accent-teal);

  /* Cybersecurity-specific light colors (legacy) */
  --cyber-cyan: var(--color-accent-cyan);
  --cyber-green: var(--color-accent-green);
  --cyber-teal: var(--color-accent-teal);
  --terminal-green: var(--color-accent-green);
  --warning-amber: var(--color-accent-amber);
  --danger-red: var(--color-status-error);
}

/* ========================================
   DARK MODE - "Midnight Espresso"
   Deep, sophisticated dark with vibrant accents
   ======================================== */
.dark {
  /* Background Layers */
  --color-bg-primary: oklch(15% 0.02 270);          /* Deep purple-black base */
  --color-bg-secondary: oklch(20% 0.03 270);        /* Elevated cards surface */
  --color-surface-default: oklch(25% 0.03 265);     /* Interactive elements */
  --color-surface-elevated: oklch(25% 0.03 265);    /* Raised surfaces */

  /* Text Colors */
  --color-text-primary: oklch(95% 0.01 270);        /* Nearly white with purple hint */
  --color-text-secondary: oklch(70% 0.02 270);      /* Muted purple-gray */
  --color-text-tertiary: oklch(55% 0.02 270);       /* Subtle gray */
  --color-text-muted: oklch(45% 0.02 270);          /* Very subtle */

  /* Accent Colors */
  --color-accent-primary: oklch(75% 0.19 50);       /* Warm coral/peach CTA */
  --color-accent-secondary: oklch(80% 0.15 110);    /* Bright lime green */
  --color-accent-tertiary: oklch(70% 0.20 340);     /* Electric magenta */
  --color-accent-success: oklch(75% 0.15 145);      /* Mint green */

  /* Cybersecurity Theme Accent Colors */
  --color-accent-cyan: oklch(70% 0.18 200);         /* Bright cyan for dark mode */
  --color-accent-teal: oklch(65% 0.16 180);         /* Teal for dark mode */
  --color-accent-green: oklch(75% 0.15 145);        /* Terminal green for dark mode */
  --color-accent-amber: oklch(75% 0.17 65);         /* Amber for dark mode */
  --color-accent-warning: oklch(78% 0.18 85);       /* Golden yellow */

  /* Border Colors */
  --color-border-default: oklch(30% 0.02 270);
  --color-border-subtle: oklch(20% 0.02 270);

  /* Interactive States - Links */
  --color-link-default: oklch(75% 0.19 50);         /* Primary coral */
  --color-link-hover: oklch(80% 0.15 110);          /* Secondary lime */
  --color-link-active: oklch(70% 0.20 340);         /* Tertiary magenta */
  --color-link-visited: oklch(65% 0.15 280);        /* Purple tint */

  /* Interactive States - Buttons (AAA contrast 7:1 minimum) */
  --color-button-primary-bg: oklch(75% 0.19 50);
  --color-button-primary-hover: oklch(78% 0.21 50);
  --color-button-primary-active: oklch(72% 0.22 50);
  --color-button-primary-text: oklch(15% 0.01 50);  /* Very dark warm - AAA contrast */

  --color-button-secondary-bg: oklch(80% 0.15 110);
  --color-button-secondary-hover: oklch(83% 0.17 110);
  --color-button-secondary-active: oklch(77% 0.18 110);
  --color-button-secondary-text: oklch(15% 0.01 110); /* Very dark cool - AAA contrast */

  --color-button-tertiary-bg: oklch(70% 0.20 340);
  --color-button-tertiary-hover: oklch(73% 0.22 340);
  --color-button-tertiary-active: oklch(67% 0.23 340);
  --color-button-tertiary-text: oklch(98% 0.01 340); /* Nearly white - AAA contrast */

  /* Alert/Status Colors */
  --color-status-success: oklch(75% 0.15 145);
  --color-status-success-bg: oklch(25% 0.08 145);
  --color-status-warning: oklch(78% 0.18 85);
  --color-status-warning-bg: oklch(25% 0.08 85);
  --color-status-error: oklch(70% 0.22 25);
  --color-status-error-bg: oklch(25% 0.08 25);
  --color-status-info: oklch(75% 0.19 50);
  --color-status-info-bg: oklch(25% 0.08 50);

  /* Code Syntax Highlighting - Dark Mode */
  --color-code-bg: oklch(18% 0.02 270);
  --color-code-text: oklch(90% 0.01 270);
  --color-code-comment: oklch(55% 0.02 270);
  --color-code-keyword: oklch(70% 0.20 340);
  --color-code-string: oklch(75% 0.15 145);
  --color-code-function: oklch(75% 0.19 50);
  --color-code-number: oklch(78% 0.18 85);
  --color-code-operator: oklch(70% 0.02 270);
  --color-code-variable: oklch(95% 0.01 270);

  /* Shadows - Strong for Dark Mode */
  --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 -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);

  /* Glow Effects - Dark Mode Specific */
  --glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3), 0 0 40px rgba(0, 217, 255, 0.1);
  --glow-green: 0 0 20px rgba(0, 255, 136, 0.3), 0 0 40px rgba(0, 255, 136, 0.1);
  --glow-amber: 0 0 20px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.1);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
  --gradient-accent: linear-gradient(135deg, #00ff88 0%, #0d9488 100%);

  /* Focus States */
  --color-focus-ring: #00d9ff;
  --color-focus-ring-offset: #0a0e27;

  /* Legacy variable mappings for backward compatibility */
  --bg: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --fg: var(--color-text-primary);
  --fg-secondary: var(--color-text-secondary);
  --muted: var(--color-text-muted);
  --link: var(--color-link-default);
  --link-hover: var(--color-link-hover);
  --border: var(--color-border-default);
  --card: var(--color-surface-default);
  --accent: var(--color-accent-cyan);

  /* Cybersecurity-specific dark colors (legacy) */
  --cyber-cyan: var(--color-accent-cyan);
  --cyber-green: var(--color-accent-green);
  --cyber-teal: var(--color-accent-teal);
  --terminal-green: var(--color-accent-green);
  --warning-amber: var(--color-accent-amber);
  --danger-red: var(--color-status-error);
  --grid-color: rgba(0, 217, 255, 0.1);
  --scan-line-color: rgba(0, 255, 136, 0.05);

  /* Focus colors (legacy) */
  --focus-ring: var(--color-focus-ring);
  --focus-ring-offset: var(--color-focus-ring-offset);

  /* Ensure proper color-scheme for system integrations */
  color-scheme: dark;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background utilities */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-surface { background-color: var(--color-surface-default); }
.bg-surface-elevated { background-color: var(--color-surface-elevated); }

/* Text color utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-muted { color: var(--color-text-muted); }

/* Border utilities */
.border-default { border-color: var(--color-border-default); }
.border-subtle { border-color: var(--color-border-subtle); }

/* Interactive utilities */
.link {
  color: var(--color-link-default);
  transition: var(--transition-colors);
}
.link:hover {
  color: var(--color-link-hover);
}
.link:active {
  color: var(--color-link-active);
}

/* Button utilities */
.btn-primary {
  background-color: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  transition: var(--transition-colors);
}
.btn-primary:hover {
  background-color: var(--color-button-primary-hover);
}
.btn-primary:active {
  background-color: var(--color-button-primary-active);
}

/* Status utilities */
.status-success { color: var(--color-status-success); }
.status-warning { color: var(--color-status-warning); }
.status-error { color: var(--color-status-error); }
.status-info { color: var(--color-status-info); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Glow utilities (dark mode only) */
.dark .glow-cyan { box-shadow: var(--glow-cyan); }
.dark .glow-green { box-shadow: var(--glow-green); }
.dark .glow-amber { box-shadow: var(--glow-amber); }

/* Gradient utilities */
.gradient-primary { background: var(--gradient-primary); }
.gradient-accent { background: var(--gradient-accent); }

/* Legacy compatibility utilities */
.bg-card { background-color: var(--card); }
.border-primary { border-color: var(--border); }