/*
 * The TREK tokens, verbatim from the app.
 *
 * Source: liketrek/TREK origin/dev, client/src/index.css (:root and .dark) and
 * client/src/mobile/mobile.css, as of the desktop redesign (#2541). The site
 * shows the app, so it uses the app's palette and not a second one that looks
 * almost the same. When the app changes a value, change it here too.
 *
 * Dark mode follows the system unless the visitor picks one; the choice lands
 * on <html data-theme>. The default accent is neutral, exactly as in the app.
 */

:root {
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-sub: "Geist", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.03);
  --bg-selected: #e2e8f0;
  --bg-elevated: rgba(250, 250, 250, 0.82);

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  --border-primary: #e5e7eb;
  --border-secondary: #f3f4f6;
  --border-faint: rgba(0, 0, 0, 0.06);

  --accent: #111827;
  --accent-text: #ffffff;
  --accent-hover: #1f2937;
  --accent-subtle: #f1f5f9;

  --success: #16a34a;
  --success-soft: #dcfce7;
  /* Green for text on --success-soft; --success alone is 3:1 there. */
  --success-text: #15803d;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --info: #2563eb;
  --info-soft: #eff6ff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-popover: 0 12px 32px -8px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.06);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Booking type colours, bookingsModel.ts */
  --t-flight: #3b82f6;
  --t-train: #06b6d4;
  --t-car: #6b7280;
  --t-hotel: #8b5cf6;
  --t-restaurant: #ef4444;
  --t-event: #f59e0b;
  --t-tour: #10b981;
  --t-transit: #7c3aed;

  /* The tints the app builds from the accent */
  --tint: color-mix(in srgb, var(--accent) 7%, transparent);
  --tint-strong: color-mix(in srgb, var(--accent) 12%, transparent);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #121215;
    --bg-secondary: #1a1a1e;
    --bg-tertiary: #1c1c21;
    --bg-card: #131316;
    --bg-input: #1c1c21;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --bg-selected: rgba(255, 255, 255, 0.1);
    --bg-elevated: rgba(19, 19, 22, 0.82);
    --text-primary: #f4f4f5;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
    --text-faint: #71717a;
    --border-primary: #27272a;
    --border-secondary: #1c1c21;
    --border-faint: rgba(255, 255, 255, 0.07);
    --accent: #e4e4e7;
    --accent-text: #09090b;
    --accent-hover: #d4d4d8;
    --accent-subtle: rgba(255, 255, 255, 0.08);
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.15);
    --success-text: #4ade80;
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.15);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.15);
    --info: #3b82f6;
    --info-soft: rgba(59, 130, 246, 0.15);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-popover: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg-primary: #121215;
  --bg-secondary: #1a1a1e;
  --bg-tertiary: #1c1c21;
  --bg-card: #131316;
  --bg-input: #1c1c21;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-selected: rgba(255, 255, 255, 0.1);
  --bg-elevated: rgba(19, 19, 22, 0.82);
  --text-primary: #f4f4f5;
  --text-secondary: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-faint: #71717a;
  --border-primary: #27272a;
  --border-secondary: #1c1c21;
  --border-faint: rgba(255, 255, 255, 0.07);
  --accent: #e4e4e7;
  --accent-text: #09090b;
  --accent-hover: #d4d4d8;
  --accent-subtle: rgba(255, 255, 255, 0.08);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.15);
  --success-text: #4ade80;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.15);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.15);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-popover: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}