/**
 * jobko.ai Design System
 * "Brand Echo" approach: Comic personality on landing, professional calm in app
 *
 * Landing = Full comic (100%)
 * Auth pages = Transitional (40%)
 * App interior = Professional with brand DNA (20%)
 */

/* ============================================
   1. CSS VARIABLES - The Brand DNA
   ============================================ */
:root {
  /* === Core Brand Colors === */
  /* These stay consistent everywhere */
  --color-brand-red: #E53935;
  --color-brand-blue: #1E88E5;
  --color-brand-yellow: #FFD54F;
  --color-brand-dark: #1a1a1a;
  --color-brand-cream: #FFF9E6;

  /* === App Palette (softened for daily use) === */
  /* Same hues, reduced saturation/adjusted lightness */
  --color-app-red: #DC5754;        /* Softer red */
  --color-app-blue: #4A9FE8;       /* Softer blue */
  --color-app-yellow: #FFE082;     /* Softer yellow */
  --color-app-background: #FDFCF8; /* Warm off-white (keeps cream DNA) */
  --color-app-surface: #FFFFFF;
  --color-app-surface-alt: #FAF9F6;

  /* === Neutrals (warm-tinted, not cold gray) === */
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #4a4a4a;
  --color-text-muted: #7a7a7a;
  --color-border: #e5e2dc;
  --color-border-strong: #d0ccc4;

  /* === Semantic Colors === */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;

  /* === Typography === */
  --font-display: 'Bangers', cursive;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* === Spacing Scale === */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

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

  /* === Shadows (warm-tinted) === */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 4px 6px rgba(26, 26, 26, 0.07);
  --shadow-lg: 0 10px 15px rgba(26, 26, 26, 0.1);

  /* === Comic Elements (for accent moments) === */
  --comic-border-width: 2px;
  --comic-shadow-offset: 3px;
}

/* ============================================
   2. BASE STYLES
   ============================================ */
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-app-background);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   3. TYPOGRAPHY
   ============================================ */

/* Display headings - Use Bangers sparingly in app */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

/* In-app: Use for key moments only (page titles, empty states, achievements) */
.heading-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

/* Standard headings - Clean and professional */
.heading-1 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.heading-2 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.heading-3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-secondary {
  color: var(--color-text-secondary);
}

/* ============================================
   4. LOGO (consistent everywhere)
   ============================================ */
.logo {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
}

.logo-red {
  color: var(--color-brand-red);
}

.logo-muted {
  color: var(--color-text-muted);
}

/* ============================================
   5. BUTTONS
   ============================================ */

/* Primary button - Brand red with subtle comic touch */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: white;
  background-color: var(--color-brand-red);
  border: var(--comic-border-width) solid var(--color-brand-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--comic-shadow-offset) var(--comic-shadow-offset) 0 var(--color-brand-dark);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: calc(var(--comic-shadow-offset) + 1px) calc(var(--comic-shadow-offset) + 1px) 0 var(--color-brand-dark);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 1px 1px 0 var(--color-brand-dark);
}

.btn-primary:disabled {
  background-color: var(--color-border);
  border-color: var(--color-border-strong);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Secondary button - Clean outline style */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background-color: var(--color-app-surface);
  border: var(--comic-border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--color-text-muted);
  background-color: var(--color-app-surface-alt);
}

/* Ghost button - Minimal style */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  transition: color 0.15s, background-color 0.15s;
  cursor: pointer;
}

.btn-ghost:hover {
  color: var(--color-text-primary);
  background-color: var(--color-app-surface-alt);
}

/* ============================================
   6. FORM INPUTS
   ============================================ */
.input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  background-color: var(--color-app-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  outline: none;
  border-color: var(--color-app-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 232, 0.15);
}

.input-error {
  border-color: var(--color-danger);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Labels */
.label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ============================================
   7. CARDS
   ============================================ */

/* Standard card - Clean with warm border */
.card {
  background-color: var(--color-app-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Elevated card - For important content */
.card-elevated {
  background-color: var(--color-app-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Accent card - Subtle comic touch for key moments */
.card-accent {
  background-color: var(--color-app-surface);
  border: var(--comic-border-width) solid var(--color-brand-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--comic-shadow-offset) var(--comic-shadow-offset) 0 rgba(26, 26, 26, 0.1);
}

/* ============================================
   8. BADGES & CHIPS
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
}

.badge-red {
  color: var(--color-brand-red);
  background-color: rgba(229, 57, 53, 0.1);
}

.badge-blue {
  color: var(--color-brand-blue);
  background-color: rgba(30, 136, 229, 0.1);
}

.badge-yellow {
  color: #b45309;
  background-color: rgba(255, 213, 79, 0.3);
}

.badge-success {
  color: var(--color-success);
  background-color: rgba(34, 197, 94, 0.1);
}

/* ============================================
   9. NAVIGATION (App Header)
   ============================================ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--color-app-surface);
  border-bottom: 1px solid var(--color-border);
}

.nav-link {
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color 0.15s, background-color 0.15s;
}

.nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-app-surface-alt);
}

.nav-link-active {
  color: var(--color-brand-red);
  background-color: rgba(229, 57, 53, 0.08);
}

/* ============================================
   10. ALERTS & FEEDBACK
   ============================================ */
.alert {
  padding: 1rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
}

.alert-error {
  color: #991b1b;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.alert-success {
  color: #166534;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.alert-warning {
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
}

.alert-info {
  color: #1e40af;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
}

/* ============================================
   11. COMIC ACCENT ELEMENTS
   Use sparingly for delight moments:
   - Empty states
   - Achievement unlocked
   - Success confirmation
   - Loading states
   ============================================ */

/* Comic burst for success/achievement moments */
.comic-burst {
  position: relative;
  display: inline-block;
}

.comic-burst::before {
  content: '';
  position: absolute;
  inset: -8px;
  background-color: var(--color-brand-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  z-index: -1;
}

/* Speech bubble for tips/hints */
.speech-bubble {
  position: relative;
  padding: 1rem 1.25rem;
  background-color: var(--color-app-surface);
  border: var(--comic-border-width) solid var(--color-brand-dark);
  border-radius: var(--radius-lg);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--color-brand-dark);
}

/* Match score display (comic style for emphasis) */
.match-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: white;
  background-color: var(--color-brand-red);
  border: var(--comic-border-width) solid var(--color-brand-dark);
  border-radius: var(--radius-md);
  box-shadow: 2px 2px 0 var(--color-brand-dark);
}

.match-score-high {
  background-color: var(--color-success);
}

.match-score-medium {
  background-color: var(--color-brand-yellow);
  color: var(--color-brand-dark);
}

.match-score-low {
  background-color: var(--color-text-muted);
}

/* ============================================
   12. EMPTY STATES
   These get full comic treatment
   ============================================ */
.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* ============================================
   13. LOADING STATES
   ============================================ */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-brand-red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   14. UTILITIES
   ============================================ */
.text-brand-red { color: var(--color-brand-red); }
.text-brand-blue { color: var(--color-brand-blue); }
.bg-brand-red { background-color: var(--color-brand-red); }
.bg-brand-blue { background-color: var(--color-brand-blue); }
.bg-brand-yellow { background-color: var(--color-brand-yellow); }
.border-brand { border-color: var(--color-brand-dark); }

/* Focus ring for accessibility */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-app-background), 0 0 0 4px var(--color-brand-blue);
}

/* Transition presets */
.transition-fast { transition: all 0.15s ease; }
.transition-normal { transition: all 0.2s ease; }