/*
 * BirthDB Renewal — Design Tokens
 * Version: 1.0 (2026-09-09)
 *
 * Shared UI layer asset for every site (docs/shared-ui-layer-design.md).
 * Linked from <head> on every page; site overrides live in lib/ui/profiles.js.
 * Output for non-Korean sites must not contain Hangul, so comments stay English.
 *
 * Source: docs/design-renewal/handoff-v1/docs/DESIGN-SYSTEM.md
 */

:root {
  /* --- Light Palette --- */
  --paper: #faf8f4;
  --paper-2: #f2efe7;
  --paper-3: #eae5d8;
  --ink: #0f1113;
  --ink-2: #26292d;
  --muted: #6b6a67;
  --muted-2: #a5a29b;
  --line: #d9d4c6;
  --line-2: #c9c3b1;
  --gold: #b8965a;

  /* --- Dark Palette --- */
  --dk-paper: #0e0b1f;
  --dk-paper-2: #191330;
  --dk-paper-3: #221844;
  --dk-ink: #f5efe0;
  --dk-ink-2: #c9c0a8;
  --dk-muted: #8b83a3;
  --dk-gold: #d4b876;
  --dk-line: rgba(212, 184, 118, 0.14);
  --dk-line-2: rgba(212, 184, 118, 0.30);

  /* --- State Colors --- */
  --st-success-bg: #e8f4e8;
  --st-success-fg: #2c6b3a;
  --st-success-line: #a8d4a8;
  --st-warn-bg: #f6ebd8;
  --st-warn-fg: #8a6a1a;
  --st-warn-line: #d4b876;
  --st-error-bg: #f8ede8;
  --st-error-fg: #8a4a2a;
  --st-error-line: #d4b4a8;
  --st-info-bg: #e8f0f8;
  --st-info-fg: #2a5486;
  --st-info-line: #a8c4d4;

  /* --- Dynamic Today Colors (overridden per page) --- */
  --today-en: #3AA6A1;
  --today-jp: #B85C5C;

  /* --- Typography --- */
  --font-display: 'Fraunces', 'Pretendard', 'Apple SD Gothic Neo', Georgia, serif;
  --font-body: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Radii --- */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-pill: 99px;

  /* --- Shadows --- */
  --shadow-card: 0 16px 30px -18px rgba(20, 18, 18, 0.24);
  --shadow-gold: 0 30px 60px -30px rgba(212, 184, 118, 0.35);
  --shadow-hero: 0 40px 80px -50px rgba(20, 18, 18, 0.25);
  --shadow-soft: 0 12px 30px -18px rgba(28, 35, 32, 0.34);
}

/* --- Base --- */

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }

/* --- Utility: mono label --- */

.mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mast .sig {
  color: var(--gold);
  font-style: italic;
  font-weight: 400;
  font-size: 0.5em;
  margin-left: 6px;
  vertical-align: 2px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Roman numeral generic style */
.roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.dark-section .roman,
.dark-hero .roman,
.dark-reading .roman,
.mystic .roman {
  color: var(--dk-gold);
}

/* Skip link (accessibility) */
.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 9px 13px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  transition: transform 0.15s;
}
.skip-link:focus { transform: translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}