/* ============================================================
   신통방통 소원방 — Colors & Type Tokens
   Sintong Bangtong Wish Room · Design System v1.0
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&family=Gaegu:wght@400;700&family=Noto+Serif+KR:wght@400;600;900&family=Pretendard:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ============================================================
     TYPOGRAPHY — Font Families
     ============================================================ */
  --font-display: 'Noto Serif KR', 'Nanum Myeongjo', serif;      /* Titles, hanja seals, hero */
  --font-body:    'Gowun Batang', 'Noto Serif KR', serif;        /* Poetic body copy, wishes */
  --font-ui:      'Pretendard', -apple-system, system-ui, sans-serif; /* UI chrome */
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', monospace;  /* Labels, metadata, dates */
  --font-hand:    'Gaegu', 'Gowun Batang', cursive;              /* Handwritten accent */

  /* ============================================================
     TYPE SCALE (semantic)
     ============================================================ */
  --text-display-1: 900 34px/1.15 var(--font-display);   /* Hero title */
  --text-display-2: 700 26px/1.2 var(--font-display);    /* Page title */
  --text-h1:        700 22px/1.3 var(--font-display);    /* Section header */
  --text-h2:        700 18px/1.3 var(--font-display);
  --text-h3:        700 15px/1.4 var(--font-body);       /* Card title (Gowun) */
  --text-body:      400 15px/1.6 var(--font-body);       /* Wish text */
  --text-ui:        500 14px/1.5 var(--font-ui);         /* Buttons, chips */
  --text-caption:   400 12px/1.5 var(--font-ui);
  --text-mono-sm:   500 10px/1.4 var(--font-mono);       /* letter-spacing: 0.3em */
  --text-mono:      500 11px/1.4 var(--font-mono);

  /* Letter-spacing helpers */
  --track-mono:     0.3em;   /* uppercase mono labels */
  --track-tight:   -0.02em;  /* display */
  --track-normal:   0;

  /* ============================================================
     SPACING SCALE (4pt base)
     ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-sm:   6px;    /* seals, tight elements */
  --r-md:   10px;   /* small cards, chips */
  --r-lg:   14px;   /* wish cards, buttons */
  --r-xl:   20px;   /* altar / hero cards */
  --r-pill: 999px;
  --r-full: 50%;

  /* ============================================================
     ELEVATION / GLOW SYSTEM
     Not conventional drop-shadows — the brand uses candle/glow-shadows
     ============================================================ */
  --glow-sm:  0 2px 8px var(--glow-shadow);
  --glow-md:  0 4px 20px var(--glow-shadow);
  --glow-lg:  0 8px 40px var(--glow-shadow), 0 0 0 4px rgba(255,255,255,0.06);
  --glow-inset: inset 0 1px 0 rgba(255,255,255,0.4);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.3), inset 0 0 40px rgba(139,90,43,0.15); /* hanji scroll */

  /* ============================================================
     DEFAULT PALETTE — Midnight Temple (심야의 신전)
     ============================================================ */
  --bg-1:          #1a0d2e;
  --bg-2:          #0a0716;
  --fg:            #f8f2e6;
  --muted:         rgba(232, 220, 200, 0.62);
  --glow:          #f5cf6a;  /* candle gold */
  --glow-shadow:   rgba(245, 207, 106, 0.35);
  --crystal:       #8dbfd6;
  --accent:        #c94a3b;  /* seal red */
  --card:          rgba(255, 235, 200, 0.05);
  --line:          rgba(255, 235, 200, 0.12);
  --sigil:         #f5cf6a;
}

/* ============================================================
   PALETTE — Dawn Hanji (새벽 한지)
   ============================================================ */
.palette-hanji, [data-palette="hanji"] {
  --bg-1:          #faf3e0;
  --bg-2:          #efe4c8;
  --fg:            #2a1f14;
  --muted:         rgba(60, 45, 30, 0.55);
  --glow:          #d97941;  /* lantern rust */
  --glow-shadow:   rgba(217, 121, 65, 0.28);
  --crystal:       #7ba896;
  --accent:        #8b3a2b;  /* ink red-brown */
  --card:          rgba(139, 90, 43, 0.06);
  --line:          rgba(60, 45, 30, 0.15);
  --sigil:         #8b5a2b;
}

/* ============================================================
   PALETTE — Moonlit Crystal (달빛 크리스탈)
   ============================================================ */
.palette-crystal, [data-palette="crystal"] {
  --bg-1:          #3d3568;
  --bg-2:          #1e1a3a;
  --fg:            #f0eaff;
  --muted:         rgba(220, 210, 245, 0.65);
  --glow:          #e8c8f5;  /* moonlit lavender */
  --glow-shadow:   rgba(232, 200, 245, 0.35);
  --crystal:       #a8d5e3;
  --accent:        #7fb8d4;  /* aqua */
  --card:          rgba(200, 180, 255, 0.08);
  --line:          rgba(220, 200, 255, 0.15);
  --sigil:         #e8c8f5;
}

/* ============================================================
   SEMANTIC UTILITY (rare — mostly used via vars above)
   ============================================================ */
.h1     { font: var(--text-display-1); letter-spacing: var(--track-tight); color: var(--fg); }
.h2     { font: var(--text-display-2); letter-spacing: var(--track-tight); color: var(--fg); }
.h3     { font: var(--text-h1); color: var(--fg); }
.body   { font: var(--text-body); color: var(--fg); }
.muted  { color: var(--muted); }
.mono   { font: var(--text-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--muted); }
.glow-text { color: var(--glow); text-shadow: 0 0 20px var(--glow-shadow); }