/* ============================================================
   RIVIERA DESIGN SYSTEM — TOKENS
   Stella polare: premium, mobile-first, contrasto WCAG AA.
   Tutti i token sono SEMANTICI. Le pagine NON usano hex grezzi:
   usano sempre var(--rn-*).

   BREAKPOINT (documentazione — niente custom media nativa stabile):
     --rn-bp-sm:  480px   (phone large)
     --rn-bp-md:  768px   (tablet / soglia app-shell mobile)
     --rn-bp-lg:  1024px  (laptop)
     --rn-bp-xl:  1280px  (desktop / container max)
   Mobile-first: scrivi prima il mobile, poi @media (min-width: ...).
   La bottom-nav e le CTA sticky compaiono <=768px.
   ============================================================ */

:root {
  /* ---- Palette brand (RAW — usare solo per derivare i semantici) ---- */
  --rn-gold:        #C9A84C;   /* accento oro */
  --rn-gold-600:    #8A6E1F;   /* oro scuro: testo oro su chiaro a contrasto AA (~4.7) + hover */
  --rn-gold-300:    #DFC070;   /* oro chiaro (dettagli su scuro) */
  --rn-dark:        #1A1A1A;   /* nero brand */
  --rn-dark-800:    #232323;   /* superficie scura alternativa */
  --rn-offwhite:    #FAFAF8;   /* off-white pagina */
  --rn-white:       #FFFFFF;
  --rn-gray-100:    #F4F3EF;
  --rn-gray-200:    #E7E5DF;
  --rn-gray-400:    #B5B2A9;
  --rn-gray-600:    #67645C;   /* testo muted su chiaro: AA su offwhite (~4.7) */
  --rn-gray-800:    #2A2A28;   /* testo principale su chiaro */

  /* ---- Colori semantici (coppie fg/bg garantite a contrasto AA) ---- */
  /* Superfici chiare → testo scuro */
  --rn-color-bg:         var(--rn-offwhite);
  --rn-color-surface:    var(--rn-white);
  --rn-color-surface-2:  var(--rn-gray-100);
  --rn-color-text:       var(--rn-gray-800);   /* su bg/surface: AA */
  --rn-color-text-muted: var(--rn-gray-600);   /* su bg/surface: AA */

  /* Superfici scure → testo chiaro */
  --rn-color-on-dark:        #F5F4F0;          /* testo su --rn-dark: AAA */
  --rn-color-on-dark-muted:  #BFBCB2;          /* muted su scuro: AA */

  /* Oro come superficie → testo on-gold leggibile */
  --rn-color-on-gold:    #1A1A1A;              /* testo su oro: AA (ratio ~7) */

  /* Bordi / divisori */
  --rn-border:        var(--rn-gray-200);
  --rn-border-dark:   rgba(255,255,255,.12);

  /* Stato / feedback — scuriti per garantire AA col testo bianco (>=4.5) */
  --rn-color-success: #1E6B43;   /* su #fff: ratio ~5.1 AA */
  --rn-color-danger:  #A12F2F;   /* su #fff: ratio ~5.4 AA */
  --rn-color-info:    #1F5C86;   /* su #fff: ratio ~5.6 AA; anche testo su chiaro */
  --rn-focus:         #1f6feb;                 /* ring focus visibile su tutto */

  /* ---- Spaziatura (scala 4px) ---- */
  --rn-space-1: 0.25rem;   /* 4 */
  --rn-space-2: 0.5rem;    /* 8 */
  --rn-space-3: 0.75rem;   /* 12 */
  --rn-space-4: 1rem;      /* 16 */
  --rn-space-5: 1.5rem;    /* 24 */
  --rn-space-6: 2rem;      /* 32 */
  --rn-space-7: 3rem;      /* 48 */
  --rn-space-8: 4.5rem;    /* 72 */

  /* ---- Tipografia ---- */
  --rn-font-display: 'Sora', 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rn-font-sans:    'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Alias semantici (heading/body) — usare questi nei componenti */
  --font-heading:    var(--rn-font-display);
  --font-body:       var(--rn-font-sans);

  /* Scala modulare (mobile-first; gli heading scalano in layout.css via clamp) */
  --rn-fs-xs:   0.75rem;   /* 12 */
  --rn-fs-sm:   0.875rem;  /* 14 */
  --rn-fs-base: 1rem;      /* 16 */
  --rn-fs-md:   1.125rem;  /* 18 */
  --rn-fs-lg:   1.375rem;  /* 22 */
  --rn-fs-xl:   1.75rem;   /* 28 */
  --rn-fs-2xl:  2.25rem;   /* 36 */
  --rn-fs-3xl:  3rem;      /* 48 */
  --rn-fs-4xl:  clamp(2.5rem, 6vw, 4.5rem);

  --rn-lh-tight: 1.15;
  --rn-lh-snug:  1.3;
  --rn-lh-base:  1.6;

  --rn-fw-regular: 400;
  --rn-fw-medium:  500;
  --rn-fw-semibold:600;
  --rn-fw-bold:    700;

  /* ---- Radius ---- */
  --rn-radius-sm:  6px;
  --rn-radius:     12px;
  --rn-radius-lg:  20px;
  --rn-radius-pill: 999px;

  /* ---- Ombre ---- */
  --rn-shadow-sm: 0 1px 3px rgba(20,20,20,.08);
  --rn-shadow-md: 0 8px 28px rgba(20,20,20,.12);
  --rn-shadow-lg: 0 24px 64px rgba(20,20,20,.20);
  --rn-shadow-gold: 0 8px 24px rgba(201,168,76,.35);

  /* ---- Z-index ---- */
  --rn-z-base:      1;
  --rn-z-sticky:    100;   /* header, sticky cta */
  --rn-z-bottomnav: 200;   /* bottom tab bar mobile */
  --rn-z-overlay:   900;   /* dim background */
  --rn-z-sheet:     1000;  /* bottom sheet / drawer */
  --rn-z-toast:     1100;

  /* ---- Layout ---- */
  --rn-container:    1280px;
  --rn-container-narrow: 880px;
  --rn-gutter:       var(--rn-space-4);
  --rn-header-h:     64px;
  --rn-bottomnav-h:  62px;

  /* ---- Motion ---- */
  --rn-ease:        cubic-bezier(.22,.61,.36,1);
  --rn-dur:         220ms;
  --rn-dur-fast:    140ms;
}

/* ============================================================
   UTILITY DI CONTRASTO (vincolanti)
   Applica la coppia fg/bg corretta in base alla superficie.
   Usa SEMPRE una di queste su qualunque blocco colorato:
   MAI testo scuro su scuro o chiaro su chiaro.
   ============================================================ */

/* Superficie scura → testo chiaro automatico */
.rn-on-dark,
.rn-surface-dark {
  background-color: var(--rn-dark);
  color: var(--rn-color-on-dark);
}
.rn-on-dark a:not([class]) { color: var(--rn-gold-300); }

/* Superficie chiara → testo scuro automatico */
.rn-on-light,
.rn-surface-light {
  background-color: var(--rn-color-surface);
  color: var(--rn-color-text);
}

/* Superficie oro → testo on-gold leggibile */
.rn-on-gold,
.rn-surface-gold {
  background-color: var(--rn-gold);
  color: var(--rn-color-on-gold);
}

/* Helper testo */
.rn-text-muted { color: var(--rn-color-text-muted); }
.rn-text-gold  { color: var(--rn-gold-600); }   /* oro leggibile su chiaro */