/* ============================================================
   Optiverse brand tokens — SINGLE SOURCE OF TRUTH

   Published at https://<site>/brand/tokens.css (stable, unhashed URL).
   The website loads this very file (index.html) and so do other
   Optiverse surfaces (e.g. the backend payment confirmation page via
   /brand/confirm.css). Restyle here and every consumer follows.

   Only custom properties and the web-font import live here: no
   selectors other than :root, so consumers can load it safely.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Outfit:wght@500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;

  --bg-primary: #07080f;
  --bg-secondary: #0b0d17;
  --bg-card: #0f1220;
  --bg-card-hover: #141829;
  --border: #1b1f31;
  --border-light: #2a3049;
  --text-primary: #f2f4fa;
  --text-secondary: #a3a9bd;
  --text-muted: #737a94;
  --accent: #5b8cff;
  --accent-glow: #4a7bff;
  --accent-soft: rgba(91, 140, 255, 0.14);
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --orange: #fbbf24;
  --purple: #a78bfa;
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(91, 140, 255, 0.16) 0%, transparent 70%), #07080f;

  /* Colori semantici aggiuntivi (stati, bordi tenui) */
  --text-on-accent: #ffffff;
  --accent-border: rgba(91, 140, 255, 0.4);
  --green-border: rgba(52, 211, 153, 0.3);
  --red-border: rgba(248, 113, 113, 0.3);
  --orange-soft: rgba(251, 191, 36, 0.12);
  --orange-border: rgba(251, 191, 36, 0.3);
  --purple-soft: rgba(167, 139, 250, 0.14);
  --teal: #2dd4bf;
  --teal-soft: rgba(45, 212, 191, 0.12);
  --surface-subtle: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --overlay: rgba(3, 4, 9, 0.75);
  --navbar-bg: rgba(7, 8, 15, 0.55);
  --navbar-bg-scrolled: rgba(7, 8, 15, 0.82);

  /* Marchio: le tinte del logo */
  --brand-cyan: #22d3ee;
  --brand-blue: #3b82f6;
  --brand-violet: #7c5cff;
  --brand-lilac: #c084fc;
  --gradient-brand: linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #7c5cff 70%, #c084fc 100%);
  --gradient-highlight: linear-gradient(90deg, #7dd3fc 0%, #5b8cff 40%, #a78bfa 75%, #e9d5ff 100%);
  --gradient-button: linear-gradient(100deg, #3b82f6 0%, #6d5cff 60%, #a855f7 100%);
  --hero-blob-blue: rgba(59, 130, 246, 0.55);
  --hero-blob-violet: rgba(124, 92, 255, 0.5);
  --hero-blob-cyan: rgba(34, 211, 238, 0.3);
  --glass-bg: rgba(255, 255, 255, 0.04);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Superfici "vetro" e card su fondo scuro */
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --card-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%);
  --card-surface-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);
  --price-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  --price-featured-surface: linear-gradient(180deg, #121530, #0c0e1c);
  --shadow-featured: 0 30px 90px rgba(91, 108, 255, 0.22);
  --btn-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 30px rgba(91, 108, 255, 0.3);
  --btn-shadow-hover: inset 0 0 0 1px rgba(255, 255, 255, 0.16), var(--shadow-accent);
  --dropdown-bg: rgba(13, 16, 32, 0.96);
  --footer-glow: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(124, 92, 255, 0.16) 0%, transparent 70%);

  /* Cornici degli screenshot */
  --frame-bar: #0d1020;
  --frame-border: #22273d;
  --frame-dot: #2a3050;
  --frame-text: #8592ab;

  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-brand: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fs-xs: 0.7rem;
  --fs-sm: 0.79rem;
  --fs-md: 0.86rem;
  --fs-base: 0.9rem;
  --fs-lg: 1rem;
  --fs-xl: 1.26rem;
  --fs-2xl: 1.8rem;

  /* Spaziatura (scala 4px) */
  --space-1: 4px;
  --space-2: 7px;
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 21px;
  --space-8: 28px;
  --space-10: 35px;
  --space-12: 42px;
  --space-16: 56px;
  --space-20: 70px;

  /* Raggi, ombre, livelli */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-control: 10px; /* input, dropdown */
  --radius-lg: 12px;
  --radius-card: 16px;    /* card e pannelli */
  --radius-xl: 22px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 30px 90px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 10px 40px rgba(91, 108, 255, 0.45);
  --shadow-frame: 0 40px 120px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --z-navbar: 100;
  --z-dropdown: 1000;
  --z-modal: 2000;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 820px;
  --navbar-height: 62px;
  /* Spazio verticale delle sezioni: si riduce sugli schermi bassi
     (portatili con zoom al 125%: circa 730 px utili) */
  --section-pad-y: clamp(56px, 9.5vh, 90px);
  --section-pad-x: 48px;
}