/* ============================================
   Nav.ai Design System
   Shadcn HSL Architecture - Light Mode Only
   ============================================ */

:root {
  color-scheme: light;

  /* ==========================================
     SHADCN HSL DESIGN TOKENS
     ========================================== */

  /* Background */
  --background: 0 0% 100%;              /* Pure White */
  --foreground: 222 47% 11%;            /* Deep Navy #0b2e34 */

  /* Primary (Nav.ai Navy) */
  --primary: 188 64% 13%;               /* #0b2e34 - Nav.ai Deep Navy */
  --primary-foreground: 0 0% 100%;      /* White text on Navy */

  /* Accent (Nav.ai Lime) */
  --accent: 84 96% 62%;                 /* #b0fc40 - Nav.ai Lime Green */
  --accent-foreground: 188 64% 13%;     /* Navy text on Lime */

  /* Muted */
  --muted: 210 40% 96.1%;               /* Very subtle gray */
  --muted-foreground: 215.4 16.3% 46.9%; /* Medium gray */

  /* Card */
  --card: 0 0% 100%;                    /* White cards */
  --card-foreground: 222 47% 11%;       /* Navy text */

  /* Popover */
  --popover: 0 0% 100%;                 /* White popover */
  --popover-foreground: 222 47% 11%;    /* Navy text */

  /* Border */
  --border: 214 32% 91%;                /* Subtle Gray #e4e4e7 */
  --input: 214 32% 91%;                 /* Input border */
  --ring: 188 64% 13%;                  /* Focus ring - Navy */

  /* Semantic Colors */
  --destructive: 0 84.2% 60.2%;         /* Red #ef4444 */
  --destructive-foreground: 0 0% 100%;  /* White text */

  --success: 142 71% 45%;               /* Green #10b981 */
  --success-foreground: 0 0% 100%;      /* White text */

  --warning: 38 92% 50%;                /* Amber #f59e0b */
  --warning-foreground: 0 0% 100%;      /* White text */

  --info: 217 91% 60%;                  /* Blue #3b82f6 */
  --info-foreground: 0 0% 100%;         /* White text */

  /* ==========================================
     DESIGN SYSTEM PRIMITIVES
     ========================================== */

  /* Radius */
  --radius: 0.5rem;                     /* 8px corners */

  /* Typography - Aeonik */
  --font-sans: 'Aeonik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Aeonik', 'Inter', sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* Letter spacing for non-Aeonik fallbacks */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 8px Grid System */
  --spacing-base: 8px;
  --spacing-2x: 16px;
  --spacing-3x: 24px;
  --spacing-4x: 32px;
  --spacing-6x: 48px;
  --spacing-8x: 64px;

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(11, 46, 52, 0.1);
  --glass-blur: blur(8px);
}

/* ==========================================
   GLOBAL STYLES
   ========================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  letter-spacing: var(--letter-spacing-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-tight);
}

h1, h2, h3, h4, h5, h6 {
  color: hsl(var(--foreground));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
}

a {
  color: hsl(var(--primary));
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

button {
  font-family: var(--font-sans);
  letter-spacing: var(--letter-spacing-tight);
}

/* ==========================================
   CONTRAST RULE: Navy Backgrounds
   ========================================== */

[style*="background: hsl(var(--primary))"],
[style*="background-color: hsl(var(--primary))"],
.bg-primary,
.bg-navy {
  color: hsl(var(--primary-foreground)) !important;
}

[style*="background: hsl(var(--primary))"] *,
[style*="background-color: hsl(var(--primary))"] *,
.bg-primary *:not(.btn):not(.badge),
.bg-navy *:not(.btn):not(.badge) {
  color: hsl(var(--primary-foreground));
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

*:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* ==========================================
   LEGACY COMPATIBILITY LAYER
   Maps old variables to new HSL tokens
   ========================================== */

:root {
  /* Background mappings */
  --bg-primary: hsl(var(--background));
  --bg-secondary: hsl(var(--muted));
  --bg-elevated: hsl(var(--card));
  --bg-tertiary: hsl(210 40% 96%);

  /* Text mappings */
  --text-primary: hsl(var(--foreground));
  --text-secondary: hsl(var(--muted-foreground));
  --text-inverse: hsl(var(--primary-foreground));

  /* Border mappings */
  --border-light: hsl(var(--border));
  --card-border: hsl(var(--border));
  --card-border-hover: hsl(214 32% 85%);

  /* Brand mappings (for gradual migration) */
  --brand-primary: hsl(var(--primary));
  --brand-accent: hsl(var(--accent));

  /* Semantic mappings */
  --color-success: hsl(var(--success));
  --color-warning: hsl(var(--warning));
  --color-error: hsl(var(--destructive));
  --color-info: hsl(var(--info));
}