@import url("./navbar.css");
/* ============================================================
   AICLYSM DESIGN TOKENS — Single Source of Truth
   Dark + Light mode. All pages import this file.
   ============================================================ */

/* ── Dark Mode (default) ───────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg-deep: #020408;
  --color-bg-primary: #080b12;
  --color-bg-surface: #0d1117;
  --color-bg-elevated: #111827;
  --color-bg-header: rgba(8,11,18,0.92);
  --color-bg-card: rgba(12,16,28,0.8);
  --color-bg-input: rgba(255,255,255,0.10);
  --color-bg-hover: rgba(255,255,255,0.06);

  /* Text — off-white, NEVER pure #fff */
  --color-text-primary: #c8ced8;
  --color-text-secondary: rgba(200,206,216,0.7);
  --color-text-muted: rgba(200,206,216,0.62);

  /* Borders */
  --color-border-subtle: rgba(255,255,255,0.05);
  --color-border-medium: rgba(255,255,255,0.08);
  --color-border-glass: rgba(0,240,255,0.12);
  --color-border-glass-hover: rgba(0,240,255,0.25);

  /* Neon accents */
  --color-cyan: #00f0ff;
  --color-purple: #7b2ff7;
  --color-magenta: #ff2d8a;
  --color-green: #00ff88;
  --color-yellow: #ffcc00;
  --color-orange: #ff8800;
  --color-red: #ff3355;

  /* Score scale (red=worst → cyan=best) */
  --color-score-critical: #e8394e;
  --color-score-low: #e87a20;
  --color-score-fair: #e8b820;
  --color-score-good: #2ee88a;
  --color-score-excellent: #1ad8e6;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #00f0ff, #7b2ff7);
  --gradient-hero: linear-gradient(135deg, #00f0ff 0%, #7b2ff7 50%, #ff0080 100%);
  --gradient-magenta: linear-gradient(135deg, #7b2ff7, #ff0080);

  /* Shadows / Glows */
  --shadow-glow-cyan: 0 0 30px rgba(0,240,255,0.3), 0 0 60px rgba(0,240,255,0.1);
  --shadow-glow-purple: 0 0 30px rgba(123,47,247,0.3), 0 0 60px rgba(123,47,247,0.1);

  /* Fonts */
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  /* ── Backward-compatible aliases (remove after full migration) ── */

  /* design-system.css names */
  --bg-deep: var(--color-bg-deep);
  --bg-surface-1: var(--color-bg-primary);
  --bg-surface-2: var(--color-bg-surface);
  --bg-surface-3: var(--color-bg-elevated);
  --primary: var(--color-cyan);
  --secondary: var(--color-purple);
  --accent: var(--color-magenta);
  --success: var(--color-green);
  --warning: var(--color-yellow);
  --danger: var(--color-red);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --gradient-cta: var(--gradient-primary);
  --gradient-glow: radial-gradient(circle, rgba(0,240,255,0.15) 0%, transparent 70%);
  --gradient-dark: linear-gradient(180deg, #020408 0%, #0d1117 100%);

  /* tools/shared.css names */
  --bg: var(--color-bg-primary);
  --card: var(--color-bg-card);
  --card-border: var(--color-border-glass);
  --cyan: var(--color-cyan);
  --purple: var(--color-purple);
  --green: var(--color-green);
  --red: var(--color-red);
  --yellow: var(--color-yellow);
  --orange: var(--color-orange);
  --text: var(--color-text-primary);
  --glass: rgba(15,20,35,0.6);

  /* 404/privacy/terms names */
  --neon: var(--color-cyan);
  --text2: var(--color-text-secondary);
  --text3: var(--color-text-muted);
  --border: var(--color-border-medium);
}

/* ── Light Mode ────────────────────────────────────────────── */
html.light {
  /* Backgrounds — off-white, NEVER pure #fff for main bg */
  --color-bg-deep: #e0e4eb;
  --color-bg-primary: #edf0f4;
  --color-bg-surface: #f5f7fa;
  --color-bg-elevated: #ffffff;
  --color-bg-header: rgba(237,240,244,0.95);
  --color-bg-card: rgba(255,255,255,0.85);
  --color-bg-input: rgba(0,0,0,0.06);
  --color-bg-hover: rgba(0,0,0,0.04);

  /* Text — dark blue-gray, NEVER pure #000 */
  --color-text-primary: #2d3142;
  --color-text-secondary: #374357;
  --color-text-muted: #4d5768;

  /* Borders */
  --color-border-subtle: rgba(0,0,0,0.06);
  --color-border-medium: rgba(0,0,0,0.10);
  --color-border-glass: rgba(8,95,109,0.15);
  --color-border-glass-hover: rgba(8,95,109,0.30);

  /* Accents — deeper for contrast on light bg */
  --color-cyan: #085f6d;
  --color-purple: #5c1fb8;
  --color-magenta: #b50460;
  --color-green: #036830;
  --color-yellow: #7a6200;
  --color-orange: #a04e10;
  --color-red: #c01030;

  /* Score scale — deeper values */
  --color-score-critical: #c01030;
  --color-score-low: #a04e10;
  --color-score-fair: #7a6200;
  --color-score-good: #036830;
  --color-score-excellent: #085f6d;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #085f6d, #5c1fb8);
  --gradient-hero: linear-gradient(135deg, #085f6d 0%, #5c1fb8 50%, #b50460 100%);
  --gradient-magenta: linear-gradient(135deg, #5c1fb8, #b50460);

  /* Shadows — subtle, no neon glow */
  --shadow-glow-cyan: 0 4px 20px rgba(8,95,109,0.12);
  --shadow-glow-purple: 0 4px 20px rgba(92,31,184,0.12);

  /* Alias overrides */
  --glass: rgba(255,255,255,0.7);
  --bg2: var(--color-bg-surface);
  --card2: var(--color-bg-elevated);
  --border2: var(--color-border-subtle);
  --text4: var(--color-text-muted);
  --blue: #1a5fb4;
}

/* ── Theme Toggle Button ───────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--color-border-medium);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.theme-toggle:hover {
  color: var(--color-cyan);
  border-color: var(--color-cyan);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-cyan);
  outline-offset: 2px;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-sun, .theme-icon-moon { transition: opacity 0.2s; }
html.dark .theme-icon-moon { display: none; }
html.light .theme-icon-sun { display: none; }