/* css/base.css — CSS variables, body, global layout utilities */

/* ================== CSS VARIABLES ================== */
:root {
  /* Backgrounds — page is subtly tinted so white cards have something to pop against */
  --bg-primary: #f1f5f9;
  --bg-secondary: #e8eef5;
  --bg-elevated: #f3f4f6;
  --card-bg: #ffffff;
  --input-bg: #ffffff;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #4b5563;
  --placeholder-color: #9ca3af;

  /* Borders */
  --border-color: #d1d5db;
  --border-color-subtle: #e5e7eb;
  --input-border: #d1d5db;

  /* Shadows */
  --shadow-light: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --navbar-shadow: 0 1px 2px rgba(0,0,0,0.05);

  /* Button accent colors */
  --primary-blue-rgb: 37, 99, 235;
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --success-green: #198754;
  --danger-red: #dc3545;
  --warning-yellow: #ffc107;
  --secondary-gray: #6c757d;
  --info-cyan: #0dcaf0;
  --dark-charcoal: #343a40;

  /* Button rest-state text (differs from accent for readability) */
  --btn-warning-text: #856404;
  --btn-info-text: #0a7aab;

  /* Button hover/active text */
  --btn-primary-hover-text: #fff;
  --btn-success-hover-text: #fff;
  --btn-warning-hover-text: #000;
  --btn-danger-hover-text: #fff;
  --btn-secondary-hover-text: #fff;
  --btn-info-hover-text: #000;
  --btn-dark-hover-text: #fff;

  /* Button hover/active shadows */
  --btn-primary-shadow: 0 2px 10px rgba(var(--primary-blue-rgb), 0.25);
  --btn-success-shadow: 0 2px 10px rgba(25, 135, 84, 0.25);
  --btn-warning-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
  --btn-danger-shadow: 0 2px 10px rgba(220, 53, 69, 0.25);
  --btn-secondary-shadow: 0 2px 10px rgba(108, 117, 125, 0.25);
  --btn-info-shadow: 0 2px 10px rgba(13, 202, 240, 0.3);
  --btn-dark-shadow: 0 2px 10px rgba(52, 58, 64, 0.25);

  /* Tables */
  --table-bg: transparent;
  --table-stripe-bg: rgba(15, 23, 42, 0.025);
  --table-header-bg: #f3f4f6;

  /* Alerts */
  --alert-bg: #fff3cd;
  --alert-info-bg: rgba(14, 165, 233, 0.07);
  --alert-info-border: rgba(14, 165, 233, 0.25);
  --alert-info-text: #055160;
  --alert-info-strong: #055160;
  --alert-warning-bg: rgba(234, 179, 8, 0.08);
  --alert-warning-border: rgba(234, 179, 8, 0.35);
  --alert-warning-text: #78350f;
  --alert-warning-strong: #92400e;
  --alert-danger-bg: rgba(220, 38, 38, 0.07);
  --alert-danger-border: rgba(220, 38, 38, 0.2);
  --alert-danger-text: #842029;
  --alert-danger-strong: #842029;

  /* Overlays (trip card internals) */
  --overlay-soft: rgba(0, 0, 0, 0.03);
  --overlay-border: rgba(0, 0, 0, 0.07);

  /* Layout tokens */
  --btn-radius: 8px;
  --card-radius: 12px;

  /* Utility tokens */
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.06);
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --focus-ring: 0 0 0 3px rgba(var(--primary-blue-rgb), 0.28);
  --via-accent: #e8910c;
  --via-accent-hover: #d4820a;

  /* Trip-pair row tints (consumed by tables.css) */
  --trip-pair-1-bg: #64748b;
  --trip-pair-1-fg: #ffffff;
  --trip-pair-2-bg: #475569;
  --trip-pair-2-fg: #ffffff;
  --trip-unpaired-ha-bg: #fde68a;
  --trip-unpaired-ha-fg: #111827;
  --trip-unpaired-ah-bg: #fef3c7;
  --trip-unpaired-ah-fg: #111827;
  --trip-away-away-bg: #dc2626;
  --trip-away-away-fg: #ffffff;

  /* Trip leg box overlay (consumed by trip-cards.css) */
  --trip-leg-bg: rgba(0,0,0,0.025);
  --trip-leg-border: rgba(0,0,0,0.12);

  /* VIA direction tokens (consumed by via.css) */
  --via-away: #dc2626;
  --via-away-hover: #b91c1c;
  --via-home: #16a34a;
  --via-home-hover: #15803d;
  --via-turn: #7c3aed;
  --via-turn-hover: #6d28d9;
  --via-dh: #64748b;
  --via-dh-hover: #475569;
  --via-rt-leftborder: #3b82f6;

  /* ================== 2026 REFRESH TOKENS (additive) ================== */
  /* Elevation — 4-tier scale. Map: navbar=1, card=2, card-hover/popover=3, modal=4 */
  --elev-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --elev-2: 0 2px 6px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --elev-3: 0 8px 24px rgba(15,23,42,0.09), 0 2px 6px rgba(15,23,42,0.05);
  --elev-4: 0 24px 48px rgba(15,23,42,0.14), 0 8px 16px rgba(15,23,42,0.08);

  /* Spacing — 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii scale. Map: chips/badges=sm, buttons/inputs/alerts=md, cards/modals=lg */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Motion scale */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

  /* Typography scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.25;
  --lh-base: 1.55;

  /* Semantic accents — rest color + tinted bg (8%) + border (25%) */
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.08);
  --success-border: rgba(22, 163, 74, 0.25);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.25);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.25);
  --info: #0284c7;
  --info-bg: rgba(2, 132, 199, 0.08);
  --info-border: rgba(2, 132, 199, 0.25);

  /* Brand accent (amber) — formalized for brand moments; aliases existing --via-accent */
  --accent-amber: #e8910c;
  --accent-amber-hover: #d4820a;
}

/* ================== UTILITY CLASSES ================== */
.card-elevated {
  background: var(--bg-elevated);
}

/* ================== GLOBAL BODY ================== */

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

/* Headings — typographic intent via Inter's variable-weight features */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  line-height: var(--lh-tight);
}
h1, h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
h3, h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
h5, h6 {
  font-weight: 600;
  letter-spacing: 0;
}

/* Bootstrap utility overrides — use variables so dark mode flows automatically */
.text-secondary { color: var(--text-secondary) !important; }
.text-muted,
.form-text     { color: var(--text-muted) !important; }

/* ================== SPACING UTILITIES ================== */
.mb-4 {
  margin-bottom: 1.5rem !important;
}

.g-3 {
  --bs-gutter-x: 1rem;
  --bs-gutter-y: 1rem;
}

/* ================== CONTAINER WIDTH CAP ================== */
/* Wide screens: cap content width so it doesn't spread edge-to-edge */
@media (min-width: 1350px) {
  .container-fluid {
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ================== VIDEO CONTAINER ================== */
.video-container {
    width: 100%;
}

.video-container iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

@media (max-width: 767.98px) {
    .video-container iframe {
        height: 200px;
    }
}

/* ================== SMOOTH DARK-MODE TRANSITION ================== */
body, .card, .card-header, .modal-content, .table,
.table td, .table th, .form-control, .form-select, textarea,
.navbar, .site-footer, .alert, .table-container,
.compact-trip-card, .badge, .btn, .trip-leg,
.issue-card, .trophy-card, .cal-grid, .cal-day {
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ================== MODAL POLISH ================== */
.modal.fade .modal-dialog {
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}
.modal-backdrop.show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ================== EMPTY STATES ================== */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}
.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.6;
    margin-bottom: 0.75rem;
    display: block;
}
.empty-state-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.empty-state-hint {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ================== TOAST SYSTEM ================== */
.mc-toast {
    min-width: 280px;
    max-width: 400px;
    border: none;
    border-radius: 10px;
    box-shadow: var(--shadow-hover);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: var(--card-bg);
    color: var(--text-primary);
    border-left: 4px solid var(--primary-blue);
}
.mc-toast.toast-success { border-left-color: var(--success-green); }
.mc-toast.toast-warning { border-left-color: var(--warning-yellow); }
.mc-toast.toast-error   { border-left-color: var(--danger-red); }

/* ================== FOCUS-VISIBLE STATES ================== */
.issue-card:focus-visible,
.welcome-card:focus-visible,
.upvote-btn:focus-visible,
.cal-event-card:focus-visible {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* ================== REDUCED MOTION ================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}