/*
 * AURA TAROT — Brand Design Tokens
 * Single source of truth for colors, typography, and spacing.
 * Use in landing page and new templates via:
 *   <link rel="stylesheet" href="/static/brand.css">
 */

:root {

  /* ── Backgrounds ──────────────────────────────────────────────────────── */
  --at-bg:          #0a0612;   /* deepest — page background */
  --at-surface:     #130d22;   /* cards, panels */
  --at-surface2:    #1a1030;   /* elevated elements inside panels */
  --at-surface3:    #221540;   /* hover states, active rows */
  --at-border:      #2e1f54;   /* default border */
  --at-border-lt:   rgba(139,92,246,.18); /* subtle border on dark glass */

  /* ── Brand — Violet/Purple ────────────────────────────────────────────── */
  --at-violet:      #7c3aed;   /* primary accent (Tailwind violet-600) */
  --at-violet-lt:   #a855f7;   /* secondary / hover (purple-500) */
  --at-violet-xl:   #c4b5fd;   /* light — labels, tags (violet-300) */
  --at-violet-dim:  rgba(124,58,237,.15); /* glass tint */
  --at-violet-glow: rgba(124,58,237,.35); /* glow / box-shadow */

  /* ── Semantic — Gold, Green, Red ──────────────────────────────────────── */
  --at-gold:        #f59e0b;   /* premium / energy high */
  --at-gold-lt:     #fde68a;
  --at-green:       #34d399;   /* success / topup */
  --at-green-dk:    #059669;
  --at-red:         #f87171;   /* error / warning */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --at-text:        #e2d6ff;   /* primary body text (lavender-white) */
  --at-text-sec:    #a78bca;   /* secondary */
  --at-text-muted:  #8b7faa;   /* muted / captions */
  --at-text-dim:    #5a4a7a;   /* very dim / placeholder */

  /* ── Typography ───────────────────────────────────────────────────────── */
  --at-font-display: 'Cinzel', Georgia, serif;          /* headings, card names */
  --at-font-body:    'Noto Sans Thai', sans-serif;       /* all body copy */

  /* ── Spacing scale (4-pt base) ────────────────────────────────────────── */
  --at-space-1:  4px;
  --at-space-2:  8px;
  --at-space-3:  12px;
  --at-space-4:  16px;
  --at-space-5:  24px;
  --at-space-6:  32px;
  --at-space-7:  48px;
  --at-space-8:  64px;

  /* ── Border radius ────────────────────────────────────────────────────── */
  --at-radius-sm:  8px;
  --at-radius-md:  16px;
  --at-radius-lg:  24px;
  --at-radius-xl:  36px;
  --at-radius-pill: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --at-shadow-sm:  0 2px 8px  rgba(0,0,0,.4);
  --at-shadow-md:  0 4px 24px rgba(0,0,0,.55);
  --at-shadow-lg:  0 8px 48px rgba(0,0,0,.7);
  --at-shadow-glow-violet: 0 0 24px rgba(124,58,237,.4);
  --at-shadow-glow-gold:   0 0 24px rgba(245,158,11,.35);

  /* ── Energy modes (reading result theming) ────────────────────────────── */
  /* used programmatically in JS — kept here for reference only            */
  /* blue: score < 4.0 · gold: 4.0–4.9 · supernova: ≥ 5.0                */
  --at-energy-blue:  #3b82f6;
  --at-energy-gold:  #f59e0b;
  --at-energy-nova:  #c840d0;  /* supernova primary */
}

/*
 * Google Fonts required by these tokens:
 * https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Noto+Sans+Thai:wght@400;600;700;800&display=swap
 */