/* =========================================================
   asutarot.com — Design Tokens
   ========================================================= */

/* Google Fonts are loaded in index.html */

:root {
  /* ── Typography ── */
  --font-display:  'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-card:     'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* ── Light Mode Palette (default) ── */
  --clr-bg:           #FAF7F0;
  --clr-bg-alt:       #F3EDD8;
  --clr-surface:      rgba(255, 255, 255, 0.72);
  --clr-surface-hover:rgba(255, 255, 255, 0.90);
  --clr-border:       rgba(201, 160, 80, 0.30);
  --clr-border-strong:rgba(201, 160, 80, 0.65);

  --clr-gold:         #C9A050;
  --clr-gold-light:   #E8C878;
  --clr-gold-dark:    #9A7430;
  --clr-rose:         #C49A9A;
  --clr-rose-light:   #D4B4B4;

  --clr-text:         #2C2017;
  --clr-text-muted:   #7A6548;
  --clr-text-faint:   #B09878;

  --clr-reversed:     #8B3A3A;
  --clr-reversed-bg:  rgba(139, 58, 58, 0.08);

  --clr-overlay:      rgba(44, 32, 23, 0.45);

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(44,32,23,0.08);
  --shadow-md:   0 4px 16px rgba(44,32,23,0.12);
  --shadow-lg:   0 8px 32px rgba(44,32,23,0.16);
  --shadow-gold: 0 0 24px rgba(201,160,80,0.35);
  --shadow-card: 0 8px 24px rgba(44,32,23,0.18);

  /* ── Border Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-card: 14px;
  --radius-pill: 999px;

  /* ── Spacing Scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ── Animation Durations ── */
  --dur-fast:   0.18s;
  --dur-step:   0.35s;
  --dur-card:   0.55s;
  --dur-reveal: 0.45s;
  --ease-smooth: cubic-bezier(0.34, 1.20, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Card dimensions ── */
  --card-w:   140px;
  --card-h:   260px;
  --card-w-lg:170px;
  --card-h-lg:300px;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --clr-bg:            #0F0A1E;
  --clr-bg-alt:        #1A1035;
  --clr-surface:       rgba(30, 20, 55, 0.80);
  --clr-surface-hover: rgba(40, 28, 70, 0.95);
  --clr-border:        rgba(224, 192, 96, 0.20);
  --clr-border-strong: rgba(224, 192, 96, 0.50);

  --clr-gold:          #E0C060;
  --clr-gold-light:    #F0D888;
  --clr-gold-dark:     #B09030;
  --clr-rose:          #D4A0A0;
  --clr-rose-light:    #E0B8B8;

  --clr-text:          #F0EBE0;
  --clr-text-muted:    #B8A888;
  --clr-text-faint:    #786858;

  --clr-reversed:      #E07878;
  --clr-reversed-bg:   rgba(224, 120, 120, 0.10);

  --clr-overlay:       rgba(0, 0, 0, 0.65);

  --shadow-sm:   0 1px 4px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.50);
  --shadow-gold: 0 0 28px rgba(224,192,96,0.30);
  --shadow-card: 0 8px 28px rgba(0,0,0,0.50);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0.01ms;
    --dur-step:   0.01ms;
    --dur-card:   0.01ms;
    --dur-reveal: 0.01ms;
  }
}