@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/* ────────────────────────────────────────────────────────────
   LocaJour Design Tokens
   One palette, one type scale, one spacing rhythm for the entire product.
   ──────────────────────────────────────────────────────────── */
@theme {
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-fraunces), Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Neutral scale (warm stone) */
  --color-stone-25: #fcfbfa;
  --color-stone-50: #faf9f7;
  --color-stone-100: #f3f1ee;
  --color-stone-150: #ebe8e4;
  --color-stone-200: #e4e1dc;
  --color-stone-300: #d3cfc8;
  --color-stone-400: #a8a29b;
  --color-stone-500: #78726b;
  --color-stone-600: #57524c;
  --color-stone-700: #3f3a35;
  --color-stone-800: #2a2621;
  --color-stone-900: #1c1917;
  --color-stone-950: #121110;

  /* Brand — deep sea teal */
  --color-brand-50: #eefaf7;
  --color-brand-100: #d5f2ea;
  --color-brand-200: #aee4d6;
  --color-brand-300: #78cebb;
  --color-brand-400: #43b19c;
  --color-brand-500: #219582;
  --color-brand-600: #16786a;
  --color-brand-700: #146056;
  --color-brand-800: #134d46;
  --color-brand-900: #12403b;
  --color-brand-950: #082422;

  /* Gold — warm secondary highlight (hospitality) */
  --color-gold-100: #fbf1d9;
  --color-gold-300: #ecc978;
  --color-gold-500: #c9a24a;
  --color-gold-700: #8f6c22;

  /* Semantic */
  --color-positive-50: #ecfdf3;
  --color-positive-100: #d3f8e2;
  --color-positive-500: #16a34a;
  --color-positive-600: #15803d;
  --color-positive-700: #166534;
  --color-warning-50: #fffbeb;
  --color-warning-100: #fdf0c8;
  --color-warning-500: #d97706;
  --color-warning-600: #b45309;
  --color-warning-700: #92400e;
  --color-negative-50: #fef2f2;
  --color-negative-100: #fde0e0;
  --color-negative-500: #dc2626;
  --color-negative-600: #b91c1c;
  --color-negative-700: #991b1b;
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-500: #2563eb;
  --color-info-600: #1d4ed8;
  --color-info-700: #1e40af;
  --color-accent-50: #f5f3ff;
  --color-accent-100: #ede9fe;
  --color-accent-500: #7c3aed;
  --color-accent-600: #6d28d9;
  --color-accent-700: #5b21b6;

  /* Surfaces (light) — overridden in .dark */
  --color-bg: var(--color-stone-50);
  --color-surface: #ffffff;
  --color-surface-2: var(--color-stone-100);
  --color-surface-3: var(--color-stone-150);
  --color-border: var(--color-stone-200);
  --color-border-strong: var(--color-stone-300);
  --color-fg: var(--color-stone-900);
  --color-fg-muted: var(--color-stone-500);
  --color-fg-subtle: var(--color-stone-400);
  --color-primary: var(--color-brand-600);
  --color-primary-hover: var(--color-brand-700);
  --color-primary-fg: #ffffff;
  --color-ring: var(--color-brand-500);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;

  --shadow-xs: 0 1px 2px rgb(28 25 23 / 0.04);
  --shadow-sm: 0 1px 3px rgb(28 25 23 / 0.06), 0 1px 2px rgb(28 25 23 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(28 25 23 / 0.08), 0 2px 4px rgb(28 25 23 / 0.04);
  --shadow-lg: 0 12px 32px -8px rgb(28 25 23 / 0.14), 0 4px 8px rgb(28 25 23 / 0.04);
  --shadow-xl: 0 24px 48px -12px rgb(28 25 23 / 0.2);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 35%, transparent), 0 10px 30px -10px color-mix(in oklab, var(--color-primary) 45%, transparent);
  --shadow-inset-hi: inset 0 1px 0 0 rgb(255 255 255 / 0.65);

  --text-2xs: 0.6875rem;
  --text-2xs--line-height: 1rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --animate-menu-in: menu-in 0.18s var(--ease-out-expo);
  --animate-menu-out: menu-out 0.14s ease-in;
  --animate-fade-out: fade-out 0.16s ease-in;
  --animate-scale-out: scale-out 0.16s ease-in;
  --animate-sheet-in: sheet-in 0.38s var(--ease-out-expo);
  --animate-sheet-out: sheet-out 0.22s ease-in;
  --animate-drawer-in: drawer-in 0.32s var(--ease-out-expo);
  --animate-drawer-out: drawer-out 0.2s ease-in;
  --animate-drawer-left-in: drawer-left-in 0.32s var(--ease-out-expo);
  --animate-drawer-left-out: drawer-left-out 0.2s ease-in;
  --animate-bell-ring: bell-ring 0.9s var(--ease-out-expo);
  --animate-badge-pop: badge-pop 0.5s var(--ease-spring);
  --animate-indeterminate: indeterminate 1.1s ease-in-out infinite;
  --animate-route-progress: route-progress 7s var(--ease-out-quart) forwards;
  --animate-float: float 5s ease-in-out infinite;
  --animate-wiggle: wiggle 0.5s var(--ease-out-expo);
  --animate-glow-flash: glow-flash 1.1s var(--ease-out-quart);
  --animate-cell-in: cell-in 0.4s var(--ease-spring) both;
  --animate-glow-pulse: glow-pulse 2.6s ease-in-out infinite;
  --animate-marquee: marquee 40s linear infinite;
  --animate-fade-in: fade-in 0.25s var(--ease-out-expo);
  --animate-slide-up: slide-up 0.3s var(--ease-out-expo);
  --animate-scale-in: scale-in 0.2s var(--ease-out-expo);
  --animate-shimmer: shimmer 1.6s linear infinite;
  --animate-page-in: page-in 0.32s var(--ease-out-expo);
  --animate-pulse-soft: pulse-soft 2.4s ease-in-out infinite;
  --animate-stream-in: stream-in 0.45s var(--ease-out-expo);
  --animate-pop: pop 0.35s var(--ease-out-expo);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  --breakpoint-xs: 30rem;
  --breakpoint-3xl: 112rem;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
@keyframes stream-in {
  from { opacity: 0; transform: translateY(-8px); background-color: color-mix(in oklab, var(--color-primary) 12%, transparent); }
  to { opacity: 1; transform: translateY(0); background-color: transparent; }
}
@keyframes pop {
  0% { transform: scale(0.94); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes shimmer {
  from { background-position: -400px 0; }
  to { background-position: 400px 0; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes scale-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.97); }
}
@keyframes menu-in {
  from { opacity: 0; transform: scale(0.94) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes menu-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to { opacity: 0; transform: scale(0.96) translateY(-2px); }
}
@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes drawer-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
@keyframes drawer-left-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes drawer-left-out {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes bell-ring {
  0% { transform: rotate(0); }
  15% { transform: rotate(-18deg); }
  30% { transform: rotate(14deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(6deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}
@keyframes badge-pop {
  0% { transform: scale(0); }
  70% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
@keyframes route-progress {
  0% { width: 0; }
  15% { width: 38%; }
  45% { width: 64%; }
  100% { width: 88%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes glow-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 45%, transparent); }
  60% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--color-primary) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 40%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--color-primary) 60%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--color-primary) 0%, transparent), 0 10px 24px -6px color-mix(in oklab, var(--color-primary) 70%, transparent); }
}
@keyframes spark-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes cell-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 95%) var(--vt-y, 28px)); }
  to { clip-path: circle(160vmax at var(--vt-x, 95%) var(--vt-y, 28px)); }
}

/* Theme switch: circular reveal from the account menu (View Transitions API) */
::view-transition-old(root) { animation: none; z-index: 0; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal 0.6s var(--ease-out-quart); z-index: 1; mix-blend-mode: normal; }

/* Dark surfaces */
.dark {
  --color-bg: #0f0e0d;
  --color-surface: #191716;
  --color-surface-2: #211f1d;
  --color-surface-3: #2a2725;
  --color-border: #2b2825;
  --color-border-strong: #3b3734;
  --color-fg: #f3f1ee;
  --color-fg-muted: #a8a29b;
  --color-fg-subtle: #78726b;
  --color-primary: var(--color-brand-500);
  --color-primary-hover: var(--color-brand-400);
  --color-primary-fg: #06201d;
  --color-ring: var(--color-brand-400);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 32px 64px -16px rgb(0 0 0 / 0.7);
  --shadow-inset-hi: inset 0 1px 0 0 rgb(255 255 255 / 0.05);
  color-scheme: dark;
}

/* Accent variants (Settings → Appearance) */
[data-accent="indigo"] {
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-ring: #6366f1;
}
[data-accent="amber"] {
  --color-primary: #b45309;
  --color-primary-hover: #92400e;
  --color-ring: #d97706;
}
.dark[data-accent="indigo"] { --color-primary: #818cf8; --color-primary-hover: #a5b4fc; --color-primary-fg: #0f0d2e; }
.dark[data-accent="amber"] { --color-primary: #f59e0b; --color-primary-hover: #fbbf24; --color-primary-fg: #2a1600; }

@layer base {
  * { border-color: var(--color-border); }
  html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
  body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01", "tnum";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
  }
  /* Ambient light: two soft brand/gold glows behind every page (fixed, never scrolls) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(900px 520px at 8% -10%, color-mix(in oklab, var(--color-primary) 9%, transparent), transparent 60%),
      radial-gradient(700px 480px at 100% 0%, color-mix(in oklab, var(--color-gold-500) 7%, transparent), transparent 60%);
  }
  .dark body::before {
    background:
      radial-gradient(900px 520px at 8% -10%, color-mix(in oklab, var(--color-primary) 14%, transparent), transparent 60%),
      radial-gradient(700px 480px at 100% 0%, color-mix(in oklab, var(--color-gold-500) 9%, transparent), transparent 60%);
  }
  h1, h2, h3 { text-wrap: balance; }
  ::selection { background: color-mix(in oklab, var(--color-primary) 22%, transparent); }
  :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
  input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
  .dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }
  input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }
  [dir="rtl"] .rtl-flip { transform: scaleX(-1); }
  /* A horizontal scroller must never dictate the width of the page: its content
     (wide tables, tab strips, chip rows) is ignored for intrinsic sizing, so grid
     and flex parents stay at the viewport width on phones. */
  .overflow-x-auto, .overflow-x-scroll { contain: inline-size; }
}

@layer utilities {
  .tabular { font-variant-numeric: tabular-nums; }
  .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
  .scrollbar-thin::-webkit-scrollbar { height: 8px; width: 8px; }
  .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px; }
  .scrollbar-none { scrollbar-width: none; }
  .scrollbar-none::-webkit-scrollbar { display: none; }
  .surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs), var(--shadow-inset-hi); }
  .glass { background: color-mix(in oklab, var(--color-surface) 78%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent); }
  .eyebrow { font-size: var(--text-2xs); line-height: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-muted); }
  .hairline-top { box-shadow: var(--shadow-inset-hi); }
  .pressable { transition: transform var(--duration-fast) var(--ease-out-expo), background-color var(--duration-fast); }
  .pressable:active { transform: scale(0.98); }
  .glow-primary { box-shadow: var(--shadow-glow); }
  .stagger > * { animation: slide-up 0.4s var(--ease-out-expo) both; }
  .stagger > *:nth-child(1) { animation-delay: 0ms; }
  .stagger > *:nth-child(2) { animation-delay: 40ms; }
  .stagger > *:nth-child(3) { animation-delay: 80ms; }
  .stagger > *:nth-child(4) { animation-delay: 120ms; }
  .stagger > *:nth-child(5) { animation-delay: 160ms; }
  .stagger > *:nth-child(6) { animation-delay: 200ms; }
  .stagger > *:nth-child(7) { animation-delay: 240ms; }
  .stagger > *:nth-child(8) { animation-delay: 280ms; }
  .stagger > *:nth-child(n + 9) { animation-delay: 320ms; }
  .stagger-fast > * { animation: slide-up 0.32s var(--ease-out-expo) both; }
  .stagger-fast > *:nth-child(1) { animation-delay: 0ms; }
  .stagger-fast > *:nth-child(2) { animation-delay: 25ms; }
  .stagger-fast > *:nth-child(3) { animation-delay: 50ms; }
  .stagger-fast > *:nth-child(4) { animation-delay: 75ms; }
  .stagger-fast > *:nth-child(5) { animation-delay: 100ms; }
  .stagger-fast > *:nth-child(6) { animation-delay: 125ms; }
  .stagger-fast > *:nth-child(7) { animation-delay: 150ms; }
  .stagger-fast > *:nth-child(n + 8) { animation-delay: 175ms; }
  /* Scroll-driven reveal for long pages (progressively enhanced) */
  @supports (animation-timeline: view()) {
    .reveal { animation: slide-up 0.6s var(--ease-out-expo) both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  }
  /* Animated underline for inline links */
  .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--duration-base) var(--ease-out-expo); }
  .link-underline:hover { background-size: 100% 1px; }
  /* Icon tiles nudge on hover */
  .icon-nudge svg { transition: transform var(--duration-base) var(--ease-spring); }
  .icon-nudge:hover svg { transform: scale(1.12) rotate(-4deg); }
  /* Light sweep across primary buttons on hover */
  .shine { position: relative; overflow: hidden; }
  .shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.55s var(--ease-out-quart); pointer-events: none; }
  .shine:hover::after { transform: translateX(120%); }
  /* Route progress bar */
  .route-bar { background: linear-gradient(90deg, var(--color-primary), var(--color-brand-400) 60%, var(--color-gold-500)); box-shadow: 0 0 12px color-mix(in oklab, var(--color-primary) 70%, transparent); }
  .origin-top-center { transform-origin: top center; }
  /* Sparkline stroke draws itself in (path must set pathLength="1") */
  .spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.2s var(--ease-out-quart) 0.1s forwards; }
  /* Pause the ticker while the pointer rests on it */
  .marquee:hover > * { animation-play-state: paused; }
  /* Perspective wrapper for tilt cards */
  .tilt-scene { perspective: 900px; }
  .tilt-card { transform-style: preserve-3d; will-change: transform; }
  .safe-top { padding-top: env(safe-area-inset-top); }
  .pb-nav { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .snap-row { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .snap-row > * { scroll-snap-align: start; }
  .gradient-text { background: linear-gradient(120deg, var(--color-fg) 0%, color-mix(in oklab, var(--color-primary) 70%, var(--color-fg)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .brand-tile { background: linear-gradient(135deg, var(--color-brand-500), var(--color-brand-700)); box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--color-brand-600) 60%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.25); }
  .dark .brand-tile { background: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-600)); }
  .skeleton {
    background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-surface-3) 40%, var(--color-surface-2) 80%);
    background-size: 800px 100%;
    animation: var(--animate-shimmer);
    border-radius: var(--radius-sm);
  }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .text-balance { text-wrap: balance; }
  .mask-fade-r { mask-image: linear-gradient(to right, black 85%, transparent); }
}

/* Recharts – inherit tokens */
.recharts-cartesian-axis-tick-value { fill: var(--color-fg-muted); font-size: 11px; }
.recharts-cartesian-grid line { stroke: var(--color-border); }
.recharts-tooltip-cursor { fill: color-mix(in oklab, var(--color-primary) 6%, transparent) !important; }
.recharts-legend-item-text { color: var(--color-fg-muted) !important; font-size: 12px; }

/* Live indicator */
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: var(--color-positive-500); }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 9999px; border: 2px solid var(--color-positive-500); opacity: 0.6; animation: live-ring 1.8s ease-out infinite; }
@keyframes live-ring { from { transform: scale(0.6); opacity: 0.7; } to { transform: scale(1.6); opacity: 0; } }

/* Interactive card lift */
.card-lift { transition: transform var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo), border-color var(--duration-base); }
.card-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--shadow-inset-hi); border-color: var(--color-border-strong); }
@media (hover: none) { .card-lift:hover { transform: none; box-shadow: var(--shadow-xs); } }
/* Sticky table header inside a scrolling surface */
.table-head-glass { background: color-mix(in oklab, var(--color-surface) 92%, var(--color-surface-2)); backdrop-filter: blur(8px); }

/* Reduced motion: keep the product usable, drop the flourish */
@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; }
  .live-dot::after { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Print */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
}