/* ==========================================================================
   LyamFlow — Landing / Design tokens
   --------------------------------------------------------------------------
   Ogni valore qui dentro è ricavato dal prodotto reale
   (src/index.css, tailwind.config.js, src/components/ui/*).
   La landing NON introduce una nuova identità: la estende in versione
   "dark luxury", perché il sito e il gestionale devono sembrare
   la stessa cosa.
   ========================================================================== */

.lf {
  /* ------------------------------------------------------------ Superfici */
  /* Base cosmica della pagina di prenotazione (.dark .cosmic-bg) */
  --lf-void: #02040a;
  --lf-bg: #04060c;
  /* --background dark = 224 24% 5% */
  --lf-bg-soft: hsl(224 24% 5%);
  /* --card dark = 224 20% 8% */
  --lf-surface: hsl(224 20% 8%);
  --lf-surface-2: hsl(223 15% 14%); /* --secondary / --muted dark */
  --lf-surface-3: hsl(223 15% 16%); /* --accent dark */

  /* Vetro: stesso trattamento di .glass e .booking-panel */
  --lf-glass: hsl(224 20% 8% / 0.55);
  --lf-glass-strong: hsl(224 20% 8% / 0.78);
  --lf-glass-blur: 28px;
  --lf-glass-saturate: 150%;

  /* --------------------------------------------------------------- Testo */
  --lf-fg: hsl(210 20% 96%); /* --foreground dark */
  --lf-fg-dim: hsl(213 16% 78%);
  --lf-muted: hsl(218 11% 62%); /* --muted-foreground dark */
  /* 52% e non meno: sotto questa soglia il contrasto col fondo scende sotto
     4.5:1 e note dei prezzi, intestazioni e copyright del footer non
     passerebbero WCAG AA. Qui siamo a 5.1:1, e resta comunque il grigio più
     spento della scala. */
  --lf-faint: hsl(218 11% 52%);

  /* ------------------------------------------------------------- Bordi */
  --lf-line: hsl(223 14% 17%); /* --border dark */
  --lf-line-soft: hsl(223 14% 17% / 0.6);
  --lf-line-bright: hsl(210 40% 98% / 0.14);
  --lf-ring: hsl(213 20% 70%); /* --ring dark */

  /* --------------------------------------------------------- Accenti */
  /* Le quattro nebulose di .dark .cosmic-bg, promosse ad accenti di brand. */
  --lf-azure: hsl(205 100% 58%);
  --lf-azure-soft: hsl(205 100% 66%);
  --lf-cyan: hsl(190 100% 62%);
  --lf-violet: hsl(265 88% 62%);
  --lf-magenta: hsl(286 92% 60%);

  --lf-success: hsl(152 50% 44%);
  --lf-warning: hsl(38 88% 56%);
  --lf-danger: hsl(0 63% 50%);

  /* Gradiente firma: la stessa lettura sinistra→destra della cosmic-bg */
  --lf-grad-brand: linear-gradient(
    100deg,
    var(--lf-cyan) 0%,
    var(--lf-azure) 34%,
    var(--lf-violet) 72%,
    var(--lf-magenta) 100%
  );
  --lf-grad-text: linear-gradient(
    92deg,
    hsl(210 20% 99%) 0%,
    hsl(205 100% 86%) 42%,
    hsl(268 90% 86%) 78%,
    hsl(210 20% 92%) 100%
  );

  /* ---------------------------------------------------------- Raggi */
  /* --radius dell'app = 0.875rem; i pannelli grandi usano 1.75rem */
  --lf-r-xs: 0.5rem;
  --lf-r-sm: 0.625rem;
  --lf-r-md: 0.875rem;
  --lf-r-lg: 1.125rem;
  --lf-r-xl: 1.5rem;
  --lf-r-2xl: 1.75rem;
  --lf-r-3xl: 2.25rem;
  --lf-r-full: 999px;

  /* --------------------------------------------------------- Ombre */
  /* shadow-soft / elevated / float di tailwind.config.js, ricalibrate su fondo scuro */
  --lf-sh-soft: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 1px 3px 0 rgb(0 0 0 / 0.3);
  --lf-sh-elevated: 0 4px 12px -2px rgb(0 0 0 / 0.5), 0 12px 32px -8px rgb(0 0 0 / 0.55);
  --lf-sh-float: 0 8px 24px -6px rgb(0 0 0 / 0.5), 0 24px 60px -12px rgb(0 0 0 / 0.6);
  --lf-sh-panel: 0 50px 140px -50px rgba(2, 6, 20, 0.9), inset 0 1px 0 hsl(0 0% 100% / 0.06);
  --lf-sh-device: 0 2px 6px rgb(0 0 0 / 0.4), 0 30px 60px -20px rgb(0 0 0 / 0.7),
    0 80px 160px -60px rgb(0 0 0 / 0.9);

  /* Aloni */
  --lf-glow-azure: 0 0 60px -10px hsl(205 100% 58% / 0.55);
  --lf-glow-violet: 0 0 80px -12px hsl(265 88% 62% / 0.5);

  /* ------------------------------------------------------ Tipografia */
  --lf-font: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'Segoe UI', Roboto, sans-serif;
  --lf-font-display: 'Inter var', 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI',
    sans-serif;
  --lf-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Scala fluida: da mobile a 1440px, senza breakpoint */
  --lf-t-mega: clamp(3.25rem, 11.2vw, 9.5rem);
  --lf-t-h1: clamp(2.75rem, 8vw, 6.5rem);
  --lf-t-h2: clamp(2.25rem, 5.4vw, 4.5rem);
  --lf-t-h3: clamp(1.5rem, 2.6vw, 2.25rem);
  --lf-t-h4: clamp(1.15rem, 1.7vw, 1.5rem);
  --lf-t-lead: clamp(1.0625rem, 1.35vw, 1.375rem);
  --lf-t-body: 1rem;
  --lf-t-sm: 0.875rem;
  --lf-t-xs: 0.8125rem;
  --lf-t-2xs: 0.6875rem;

  /* h1..h4 dell'app: font-display + tracking -0.02em (hero ancora più stretto) */
  --lf-track-mega: -0.045em;
  --lf-track-tight: -0.03em;
  --lf-track-normal: -0.02em;
  --lf-track-wide: 0.14em; /* eyebrow / uppercase, come il logo "Reservations" */

  /* ----------------------------------------------------------- Spazio */
  --lf-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --lf-section: clamp(6rem, 12vw, 11rem);
  --lf-maxw: 1280px; /* container 2xl dell'app */
  --lf-maxw-narrow: 780px;

  /* -------------------------------------------------------- Movimento */
  /* La curva dell'app: [0.22, 1, 0.36, 1] (expo-out) */
  --lf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lf-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --lf-dur-fast: 0.2s;
  --lf-dur: 0.45s;
  --lf-dur-slow: 0.9s;

  /* Variabili vive, scritte da JS (mouse glow, progress, tilt) */
  --lf-mx: 50%;
  --lf-my: 50%;
  --lf-progress: 0;

  /* ------------------------------------------------------------ Layer */
  --lf-z-bg: 0;
  --lf-z-content: 10;
  --lf-z-nav: 60;
  --lf-z-loader: 100;

  color-scheme: dark;
}

/* Texture di rumore: un unico SVG riusato ovunque serva "grana" fotografica. */
.lf {
  --lf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}