/* ==========================================================
   SANCTUARY 2.0 — DESIGN TOKENS
   "Aurora sobre o Mar da Galileia"
   ========================================================== */

:root {
  /* ===== SAFE AREA INSETS (iOS / Android PWA) ===== */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* ===== PALETA AURORA SACRA ===== */
  --gold-sacred: #D4AF37;
  --gold-solar: #F4C430;
  --gold-star: #FFD700;
  --bronze-deep: #8B6914;
  --white-pearl: #FAF8F5;
  --gray-pearl: #F4F4F6;
  --slate-deep: #0F172A;
  --blue-celestial: #1E3A5F;
  --night-blue: #090D16;

  /* ===== CORES SEMÂNTICAS ===== */
  --bg-site: #F4F4F6;
  --bg-card: #FFFFFF;
  --bg-island: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.78);
  --bg-elevated: #FAF8F5;

  --text-main: #0F172A;
  --text-muted: #0F172A;
  --text-light: #1E293B;
  --text-on-gold: #FFFFFF;

  --border: #E2E8F0;
  --border-island: rgba(226, 232, 240, 0.8);

  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.10);
  --shadow-island: 0 20px 50px -10px rgba(15, 23, 42, 0.08), 0 0 40px rgba(212, 175, 55, 0.14);
  --shadow-glow-gold: 0 0 30px rgba(212, 175, 55, 0.45);

  --halo-gold: rgba(212, 175, 55, 0.22);
  --halo-gold-soft: rgba(212, 175, 55, 0.10);

  /* ===== GRADIENTES AURORA (Sem tons rosa) ===== */
  --grad-aurora: linear-gradient(180deg, #090D16 0%, #1E3A5F 50%, #D4AF37 100%);
  --grad-mistico: radial-gradient(circle at 30% 20%, #F4C430 0%, #D4AF37 40%, #8B6914 100%);
  --grad-sanctuary: linear-gradient(135deg, #FAF8F5 0%, #F4F4F6 100%);
  --grad-dourado: linear-gradient(135deg, #F4C430 0%, #D4AF37 50%, #8B6914 100%);
  --grad-amanhecer: linear-gradient(180deg, rgba(254,252,246,1) 0%, rgba(244,196,48,0.12) 60%, rgba(250,248,245,1) 100%);
  --grad-noturno: linear-gradient(180deg, #090D16 0%, #1E3A5F 100%);

  /* ===== TIPOGRAFIA ===== */
  --font-title: 'Playfair Display', 'Cinzel', Georgia, serif;
  --font-cinzel: 'Cinzel', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-prayer: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-verse: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;

  /* Tipografia fluida (clamp) */
  --fs-hero: clamp(2rem, 5vw, 4rem);
  --fs-section: clamp(1.5rem, 3vw, 2.25rem);
  --fs-prayer: clamp(1.75rem, 4vw, 2.5rem);
  --fs-body: clamp(1rem, 2vw, 1.125rem);
  --fs-caption: clamp(0.875rem, 1.5vw, 1rem);
  --fs-display: clamp(2.5rem, 7vw, 5rem);

  /* ===== RAIOS ===== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-island: 32px;
  --r-pill: 999px;

  /* ===== ESPAÇAMENTOS ===== */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ===== TRANSIÇÕES ===== */
  --t-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --t-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --t-smooth: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 1.2s cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== Z-INDEX ===== */
  --z-bg: 0;
  --z-base: 1;
  --z-header: 100;
  --z-drawer: 200;
  --z-fab: 250;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ===== ANIMAÇÕES ===== */
  --anim-breathe: breathe 4s ease-in-out infinite;
  --anim-fade-up: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  --anim-pulse-gold: pulseGold 2.4s ease-in-out infinite;
  --anim-shine: shine 3.5s linear infinite;
  --anim-float: float 6s ease-in-out infinite;
  --anim-glow: glow 2s ease-in-out infinite alternate;

  /* ===== PLAYER ALTURA ===== */
  --player-h: 72px;
  --tabbar-h: 64px;
  --header-h: 76px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* ===== DARK MODE: SANCTUARY NOTURNO ===== */
[data-theme="dark"] {
  --bg-site: #090D16;
  --bg-card: #151D2A;
  --bg-island: #151D2A;
  --bg-glass: rgba(15, 22, 38, 0.78);
  --bg-elevated: #101725;

  --text-main: #FFFFFF;
  --text-muted: #FFFFFF;
  --text-light: #F1F5F9;

  --border: #1E293B;
  --border-island: rgba(30, 41, 59, 0.6);

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-island: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(212, 175, 55, 0.10);

  --grad-sanctuary: linear-gradient(135deg, #101725 0%, #090D16 100%);
  --grad-amanhecer: linear-gradient(180deg, rgba(30,58,95,0.4) 0%, rgba(15,29,42,1) 100%);
}

/* ===== SEPIA MODE: MODO SÉPIA ACOLHEDOR ===== */
[data-theme="sepia"] {
  --bg-site: #F4ECD8;
  --bg-card: #FAF4E6;
  --bg-island: #FAF4E6;
  --bg-glass: rgba(250, 244, 230, 0.85);
  --bg-elevated: #EDE3CA;

  --text-main: #2C1F10;
  --text-muted: #2C1F10;
  --text-light: #4A3825;

  --border: #DDD1B8;
  --border-island: rgba(221, 209, 184, 0.8);

  --shadow-sm: 0 4px 14px rgba(61, 47, 29, 0.05);
  --shadow-md: 0 12px 32px rgba(61, 47, 29, 0.08);
  --shadow-lg: 0 24px 60px rgba(61, 47, 29, 0.10);
  --shadow-island: 0 20px 50px rgba(61, 47, 29, 0.08), 0 0 40px rgba(201, 168, 76, 0.15);

  --grad-sanctuary: linear-gradient(135deg, #FAF4E6 0%, #F4ECD8 100%);
  --grad-amanhecer: linear-gradient(180deg, #FDF9EE 0%, rgba(201, 168, 76, 0.15) 60%, #F4ECD8 100%);
}