/* ═══════════════════════════════════════════════════════════════
   PIACQUE A DIO — Design System Tokens
   Mosaico Bizantino Digitale
   ═══════════════════════════════════════════════════════════════ */

/* ─── Font ──────────────────────────────────────────────────── */
:root {
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ─── Palette colori ─────────────────────────────────────────── */
:root {
  /* Sfondi */
  --col-bg:          #0A0806;  /* Nero sacro — fondo principale */
  --col-bg-soft:     #1A1410;  /* Terra scura — superfici secondarie */
  --col-bg-night:    #0D0A07;  /* Notte profonda — preghiera/video */
  --col-card:        #241B14;  /* Bruno profondo — card */
  --col-card-hi:     #2F2318;  /* Bruno mosaico — card attiva/hover */
  --col-border:      #3D2E1F;  /* Contorno tessere — bordi */

  /* Oro */
  --col-gold:        #C28B2C;  /* Oro mosaico — accenti principali */
  --col-gold-hi:     #E8B84C;  /* Oro alba — highlight, CTA */
  --col-gold-dim:    #8A6B1F;  /* Oro antico — dettagli sobri */

  /* Testo */
  --col-ivory:       #EFE4C7;  /* Avorio tessera — testo principale */
  --col-cream:       #F5ECD2;  /* Pergamena — titoli grandi */
  --col-muted:       #9C8766;  /* Ocra — didascalie */
  --col-dim:         #6B5A3E;  /* Bronzo — metadata */

  /* Cicli catechetici */
  --col-ciclo-1:     #A13530;  /* Rosso mattone — Preparazione */
  --col-ciclo-2:     #D4A94C;  /* Oro ambrato — Rivelazione */
  --col-ciclo-3:     #3D6B4A;  /* Verde smeraldo — Compimento */
}

/* ─── Gradiente alba liturgica ───────────────────────────────── */
/* "Dalle tenebre alla luce piena" — usato come sfondo scrollabile */
:root {
  --gradient-alba: linear-gradient(180deg,
    #0A0806   0%,
    #14100B  14%,
    #1F1810  28%,
    #2B1F12  44%,
    #452F17  62%,
    #7E5820  82%,
    #C28B2C 100%
  );
}

/* ─── Ombre e glow ───────────────────────────────────────────── */
:root {
  --glow-gold:    0 0 20px rgba(194,139,44,0.45);
  --glow-gold-sm: 0 0 12px rgba(194,139,44,0.35);
  --glow-gold-lg: 0 0 40px rgba(194,139,44,0.55);
}

/* ─── Pattern mosaicale (tessere geometriche) ────────────────── */
:root {
  --mosaic-fine:   repeating-linear-gradient(45deg,  rgba(194,139,44,1) 0 1px, transparent 1px 6px),
                   repeating-linear-gradient(-45deg, rgba(194,139,44,1) 0 1px, transparent 1px 6px);
  --mosaic-medium: repeating-linear-gradient(30deg,  rgba(194,139,44,1) 0 1px, transparent 1px 7px),
                   repeating-linear-gradient(-30deg, rgba(194,139,44,1) 0 1px, transparent 1px 7px);
}

/* ─── Spaziature ─────────────────────────────────────────────── */
:root {
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  --radius-sm:  8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
}

/* ─── Tab bar height ─────────────────────────────────────────── */
:root {
  --tabbar-height: 82px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
}