/* ============================================================
   Mera Travels Design Tokens
   Aurora accent (teal → indigo → magenta) on navy/near-black
   Dark = primary, Light = secondary. Toggle via [data-theme].
   ============================================================ */

:root, [data-theme="dark"] {
  /* Surface stack (dark): deep navy w/ subtle blue-purple */
  --bg-0: #07080C;             /* app canvas */
  --bg-1: #0B0D14;             /* card base */
  --bg-2: #10131C;             /* elevated */
  --bg-3: #161A26;             /* input / hover */
  --bg-4: #1E2231;             /* selected */

  /* Text */
  --fg-0: #F5F6FA;             /* primary */
  --fg-1: #C9CCD8;             /* secondary */
  --fg-2: #8B90A3;             /* tertiary */
  --fg-3: #5B6079;             /* muted */
  --fg-4: #3A3F52;             /* disabled */

  /* Borders / dividers */
  --border-0: rgba(255,255,255,0.06);
  --border-1: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.16);
  --border-strong: rgba(255,255,255,0.24);

  /* Glass */
  --glass-bg: rgba(20, 24, 36, 0.55);
  --glass-border: rgba(255,255,255,0.08);
  --glass-highlight: rgba(255,255,255,0.06);

  /* Aurora accents */
  --a-teal: #22D3EE;
  --a-indigo: #60A5FA;
  --a-magenta: #93C5FD;
  --a-teal-dim: rgba(34,211,238,0.14);
  --a-indigo-dim: rgba(96,165,250,0.16);
  --a-magenta-dim: rgba(147,197,253,0.14);

  --aurora: linear-gradient(120deg, #22D3EE 0%, #60A5FA 55%, #93C5FD 100%);
  --on-aurora: #0B0D14;   /* text/icon color on aurora gradient, dark on bright (dark theme) */
  --aurora-soft: linear-gradient(120deg, rgba(34,211,238,.22) 0%, rgba(96,165,250,.24) 55%, rgba(147,197,253,.20) 100%);
  --aurora-radial: radial-gradient(ellipse at 20% 10%, rgba(34,211,238,.18), transparent 45%),
                   radial-gradient(ellipse at 80% 0%, rgba(147,197,253,.18), transparent 50%),
                   radial-gradient(ellipse at 50% 100%, rgba(96,165,250,.22), transparent 55%);

  /* Semantic */
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --info: #60A5FA;
  --success-dim: rgba(52,211,153,.14);
  --warning-dim: rgba(251,191,36,.14);
  --danger-dim: rgba(248,113,113,.14);
  --info-dim: rgba(96,165,250,.14);

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px rgba(96,165,250,.35), 0 8px 32px rgba(96,165,250,.22);

  /* Focus ring */
  --ring: 0 0 0 2px var(--bg-1), 0 0 0 4px rgba(96,165,250,.55);
}

[data-theme="light"] {
  --bg-0: #F6F7FB;
  --bg-1: #FFFFFF;
  --bg-2: #FBFCFE;
  --bg-3: #F1F3F9;
  --bg-4: #E7EAF3;

  /* Accessibility: WCAG AA on white background */
  --fg-0: #111111;   /* primary body / headings */
  --fg-1: #333333;   /* strong secondary */
  --fg-2: #555555;   /* secondary */
  --fg-3: #666666;   /* muted / helper */
  --fg-4: #888888;   /* faint helper, still readable */

  --border-0: rgba(11,13,20,0.09);
  --border-1: rgba(11,13,20,0.12);
  --border-2: rgba(11,13,20,0.18);
  --border-strong: rgba(11,13,20,0.28);

  --glass-bg: rgba(255,255,255,0.86);
  --glass-border: rgba(11,13,20,0.10);
  --glass-highlight: rgba(255,255,255,0.9);

  --a-teal: #0E7490;
  --a-indigo: #2563EB;
  --a-magenta: #1D4ED8;
  --a-teal-dim: rgba(14,116,144,.10);
  --a-indigo-dim: rgba(37,99,235,.10);
  --a-magenta-dim: rgba(29,78,216,.10);

  --aurora: linear-gradient(120deg, #0E7490 0%, #2563EB 55%, #1D4ED8 100%);
  --on-aurora: #FFFFFF;   /* text/icon color on aurora gradient, white on darkened gradient in light theme */
  --aurora-soft: linear-gradient(120deg, rgba(14,116,144,.10) 0%, rgba(37,99,235,.12) 55%, rgba(29,78,216,.10) 100%);
  --aurora-radial: radial-gradient(ellipse at 20% 10%, rgba(14,116,144,.10), transparent 45%),
                   radial-gradient(ellipse at 80% 0%, rgba(29,78,216,.10), transparent 50%),
                   radial-gradient(ellipse at 50% 100%, rgba(37,99,235,.12), transparent 55%);

  --success: #059669;
  --warning: #D97706;
  --danger: #DC2626;
  --info: #2563EB;
  --success-dim: rgba(5,150,105,.10);
  --warning-dim: rgba(217,119,6,.12);
  --danger-dim: rgba(220,38,38,.10);
  --info-dim: rgba(37,99,235,.10);

  --shadow-sm: 0 1px 2px rgba(11,13,20,.05);
  --shadow-md: 0 6px 20px rgba(11,13,20,.06), 0 2px 4px rgba(11,13,20,.04);
  --shadow-lg: 0 20px 48px rgba(11,13,20,.10), 0 6px 14px rgba(11,13,20,.06);
  --shadow-glow: 0 0 0 1px rgba(37,99,235,.35), 0 8px 30px rgba(37,99,235,.18);

  --ring: 0 0 0 2px #fff, 0 0 0 4px rgba(37,99,235,.35);
}

/* Radius, spacing and motion. Theme-agnostic */
:root {
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-display: "New York", "Cambria", "Iowan Old Style", "Georgia", serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, "Menlo", "Cascadia Mono", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;
}