/* ==============================================================================
   InterviewPal - Twilight Tech Theme (Iris + Mint)
   Modern, confident, and slightly playful UI theme
   Replaces LinkedIn-inspired styling with creative Twilight Tech identity
   ============================================================================== */

/* Design Tokens - Twilight Tech Brand System */
:root {
  /* Brand palette (creative set) */
  --brand-primary: hsl(262 73% 48%);      /* Iris */
  --brand-primary-600: hsl(262 73% 41%);  /* hover/active */
  --brand-accent: hsl(168 58% 38%);       /* Mint/Teal (success/Pro) */
  --brand-warn: hsl(36 100% 47%);         /* Amber */
  --brand-danger: hsl(350 78% 50%);       /* Crimson */

  --surface-0: #ffffff;
  --surface-1: #f7f8fa;
  --text-900: #0b0f14;
  --text-700: #334155;
  --text-600: #4b5563;
  --border-300: #e5e7eb;
  --border-400: #d1d5db;

  /* Pico bindings */
  --pico-primary: var(--brand-primary);
  --pico-primary-hover: var(--brand-primary-600);
  --pico-muted-color: var(--text-600);
  --pico-border-color: var(--border-300);
  --pico-text-selection-color: color-mix(in oklab, var(--brand-primary) 22%, white);

  /* Subtle gradient (hero/banners only) */
  --brand-grad: linear-gradient(135deg,
                     hsl(262 73% 48%) 0%,
                     hsl(278 70% 49%) 50%,
                     hsl(168 58% 38%) 100%);

  /* Scale & feel */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem;   --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --radius-lg: 12px; --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,.08);

  /* Type scale */
  --fs-h1: clamp(1.75rem, 1.1rem + 2vw, 2.25rem);
  --fs-h2: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-caption: .875rem;

  --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7;
}

/* Apply theme when body has theme-v2 class */
body.theme-v2 {
  /* Override existing color system */
  --ip-bg: var(--surface-0);
  --ip-bg-alt: var(--surface-1);
  --ip-card: var(--surface-0);
  --ip-border: var(--border-300);
  --ip-text: var(--text-900);
  --ip-muted: var(--text-600);
  --ip-accent: var(--brand-primary);
  --ip-accent-600: var(--brand-primary-600);
  --ip-accent-700: var(--brand-primary-600);
  --ip-accent-alt: var(--brand-accent);
  --ip-warn: var(--brand-warn);
  --ip-danger: var(--brand-danger);
}

/* Headings & text */
body.theme-v2 :where(h1) {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-4);
}

body.theme-v2 :where(h2) {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: var(--space-8) 0 var(--space-4);
}

body.theme-v2 :where(h3) {
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  margin: var(--space-4) 0 var(--space-2);
}

body.theme-v2 :where(p, li, td, th) {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

body.theme-v2 .lead {
  color: var(--text-700);
  font-size: 1.0625rem;
  line-height: var(--lh-relaxed);
}

body.theme-v2 .caption {
  color: var(--text-600);
  font-size: var(--fs-caption);
}

/* Containers */
body.theme-v2 .section {
  padding: var(--space-10) 0;
}

body.theme-v2 .container-narrow {
  max-width: 720px;
  margin-inline: auto;
}

body.theme-v2 .card {
  background: var(--surface-0);
  border: 1px solid var(--border-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

body.theme-v2 .card--section {
  padding: var(--space-8);
}

body.theme-v2 .surface-1 {
  background: var(--surface-1);
}

/* Buttons - Unified System */
body.theme-v2 .btn {
  border-radius: var(--radius-sm);
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

body.theme-v2 .btn--primary {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid transparent;
}

body.theme-v2 .btn--primary:hover,
body.theme-v2 .btn-primary:hover {
  background: var(--brand-primary-600);
  transform: translateY(-1px);
}

body.theme-v2 .btn--secondary {
  background: transparent;
  border: 1px solid var(--border-400);
  color: var(--text-900);
}

body.theme-v2 .btn--secondary:hover {
  background: var(--surface-1);
  border-color: var(--brand-primary);
}

body.theme-v2 .btn--ghost {
  background: transparent;
  border: 0;
  color: var(--brand-primary);
  text-decoration: none;
}

body.theme-v2 .btn--ghost:hover {
  color: var(--brand-primary-600);
  text-decoration: underline;
}

body.theme-v2 .btn--danger {
  background: var(--brand-danger);
  color: #fff;
  border: 1px solid transparent;
}

body.theme-v2 .btn:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand-primary) 40%, transparent);
  outline-offset: 2px;
}

/* Legacy button support */
body.theme-v2 .btn-primary {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid var(--brand-primary);
}

/* Forms */
body.theme-v2 .field {
  margin-bottom: var(--space-6);
}

body.theme-v2 .field label {
  display: block;
  font-weight: 600;
  margin-bottom: .375rem;
}

body.theme-v2 .field .help {
  margin-top: .375rem;
  color: var(--text-600);
  font-size: var(--fs-caption);
}

body.theme-v2 .input, 
body.theme-v2 input:not([type="checkbox"]):not([type="radio"]),
body.theme-v2 textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-300);
  padding: var(--space-3);
  font-size: var(--fs-body);
}

body.theme-v2 .input.error, 
body.theme-v2 input:not([type="checkbox"]):not([type="radio"]).error,
body.theme-v2 textarea.error {
  border-color: var(--brand-danger);
}

body.theme-v2 .error-text {
  color: var(--brand-danger);
  font-size: var(--fs-caption);
}

body.theme-v2 .input:focus,
body.theme-v2 input:not([type="checkbox"]):not([type="radio"]):focus,
body.theme-v2 textarea:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-primary) 20%, transparent);
  outline: none;
}

/* Checkbox styling - should be visible */
body.theme-v2 input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  accent-color: var(--brand-primary);
  margin: 0;
  cursor: pointer;
  width: auto;
  height: auto;
  opacity: 1 !important;
}

/* Radio button styling - keep hidden for custom choice cards */
body.theme-v2 input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  accent-color: var(--brand-primary);
  margin: 0;
  cursor: pointer;
}

body.theme-v2 input[type="checkbox"]:focus,
body.theme-v2 input[type="radio"]:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Tables */
body.theme-v2 .table th {
  color: var(--text-700);
  font-weight: 600;
}

body.theme-v2 .table tr:hover {
  background: color-mix(in oklab, var(--brand-primary) 6%, white);
}

/* Alerts */
body.theme-v2 .alert {
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border-300);
}

body.theme-v2 .alert--success {
  background: color-mix(in oklab, var(--brand-accent) 10%, white);
  border-color: var(--brand-accent);
}

body.theme-v2 .alert--warn {
  background: color-mix(in oklab, var(--brand-warn) 10%, white);
  border-color: var(--brand-warn);
}

body.theme-v2 .alert--danger {
  background: color-mix(in oklab, var(--brand-danger) 10%, white);
  border-color: var(--brand-danger);
}

/* Navigation */
body.theme-v2 .nav-link[aria-current="page"] {
  border-bottom: 2px solid var(--brand-primary);
}

body.theme-v2 nav a:hover {
  background: var(--surface-1);
  color: var(--brand-primary);
}

body.theme-v2 nav {
  border-bottom-color: var(--border-300);
}

/* Header styling */
body.theme-v2 header.section {
  padding: var(--space-4) 0;
}

/* Focus states for all interactive elements */
body.theme-v2 a:focus-visible, 
body.theme-v2 .card:focus-within {
  outline: 3px solid color-mix(in oklab, var(--brand-primary) 40%, transparent);
  outline-offset: 2px;
}

/* Brand gradient wrapper for hero/banners */
body.theme-v2 .brand-band {
  background: var(--brand-grad);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

body.theme-v2 .brand-band h2 {
  color: #fff;
  margin: 0 0 var(--space-2) 0;
}

/* Card variations */
body.theme-v2 .card.highlight {
  border-color: var(--brand-accent);
  border-left-width: 6px;
}

body.theme-v2 .card.pro-member {
  border-left: 6px solid var(--brand-accent);
}

/* Section styling */
body.theme-v2 .section-head {
  border-bottom-color: var(--border-300);
  padding: var(--space-4) var(--space-6) var(--space-3);
}

body.theme-v2 .section-body {
  padding: var(--space-6);
}

/* Choice cards for forms */
body.theme-v2 .choice-card {
  border-radius: var(--radius-lg);
  border-color: var(--border-300);
  transition: all 0.2s ease;
}

body.theme-v2 .choice-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

body.theme-v2 .choice-card:has(input[type="radio"]:checked) {
  border-color: var(--brand-primary);
  background: color-mix(in oklab, var(--brand-primary) 8%, var(--surface-0));
  box-shadow: var(--shadow-md);
}

/* Hero section */
body.theme-v2 .hero {
  padding: var(--space-10) 0;
}

body.theme-v2 .hero h1 {
  font-size: var(--fs-h1);
  color: var(--text-900);
  margin-bottom: var(--space-4);
}

body.theme-v2 .hero .lead {
  color: var(--text-700);
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  max-width: 600px;
  margin: 0 auto var(--space-6) auto;
}

/* Page hero styling */
body.theme-v2 .page-hero {
  background: color-mix(in oklab, var(--brand-primary) 5%, var(--surface-0));
  border: 1px solid var(--border-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Features section */
body.theme-v2 .features {
  gap: var(--space-8);
}

body.theme-v2 .feature {
  padding: var(--space-6);
  background: var(--surface-0);
  border: 1px solid var(--border-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.theme-v2 .feature h3 {
  color: var(--text-900);
  margin-bottom: var(--space-3);
}

body.theme-v2 .feature p {
  color: var(--text-600);
}

/* Pricing cards */
body.theme-v2 .pricing-card {
  background: var(--surface-0);
  border: 1px solid var(--border-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  position: relative;
}

body.theme-v2 .pricing-card.featured {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}

body.theme-v2 .pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-primary);
  color: white;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption);
  font-weight: 600;
}

/* Messages */
body.theme-v2 .messages .card {
  margin-bottom: var(--space-4);
}

body.theme-v2 .messages .card.success {
  background: color-mix(in oklab, var(--brand-accent) 10%, white);
  border-color: var(--brand-accent);
  color: var(--text-900);
}

body.theme-v2 .messages .card.error {
  background: color-mix(in oklab, var(--brand-danger) 10%, white);
  border-color: var(--brand-danger);
  color: var(--text-900);
}

/* Footer */
body.theme-v2 footer {
  border-top: 1px solid var(--border-300);
  padding: var(--space-8) 0;
  margin-top: var(--space-10);
}

body.theme-v2 footer .link {
  color: var(--text-600);
}

body.theme-v2 footer .link:hover {
  color: var(--brand-primary);
}

/* Badge component */
body.theme-v2 .badge {
  background: color-mix(in oklab, var(--brand-primary) 15%, white);
  color: var(--brand-primary);
  border: 1px solid color-mix(in oklab, var(--brand-primary) 25%, white);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-caption);
  font-weight: 600;
}

body.theme-v2 .badge.success {
  background: color-mix(in oklab, var(--brand-accent) 15%, white);
  color: var(--brand-accent);
  border-color: color-mix(in oklab, var(--brand-accent) 25%, white);
}

body.theme-v2 .badge.warning {
  background: color-mix(in oklab, var(--brand-warn) 15%, white);
  color: var(--brand-warn);
  border-color: color-mix(in oklab, var(--brand-warn) 25%, white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body.theme-v2 .card {
    padding: var(--space-4);
  }
  
  body.theme-v2 .card--section {
    padding: var(--space-6);
  }
  
  body.theme-v2 .brand-band {
    padding: var(--space-6);
  }
  
  body.theme-v2 .hero {
    padding: var(--space-8) 0;
  }
}

/* Container max-width consistency */
body.theme-v2 .container {
  max-width: 1120px;
}

/* Ensure consistent link styling */
body.theme-v2 .link {
  color: var(--brand-primary);
}

body.theme-v2 .link:hover {
  color: var(--brand-primary-600);
}

/* Override existing choice card styling */
body.theme-v2 .choice-set {
  gap: var(--space-6);
}