/* =========================================================
   Transito — Global Design System Tokens v1.0
   Palette: Ivory 60% / Charcoal 25% / Champagne Gold 15%
   ========================================================= */

/* ---------- Web Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');

:root {
  /* ── Ivory Canvas (60%) ─────────────────────── */
  --ivory:        #F5F1E8;
  --ivory-soft:   #EFE9DB;
  --ivory-deep:   #E5DCC8;
  --paper:        #FAF7F0;
  --line:         #D9D0BC;
  --line-soft:    #E8E0CD;

  /* ── Charcoal (25%) ─────────────────────────── */
  --charcoal:     #1F1D1A;
  --charcoal-2:   #3A352F;
  --charcoal-3:   #6E665B;
  --charcoal-bg:  #14120F;

  /* ── Champagne Gold (15%) ───────────────────── */
  --gold:         #B89968;
  --gold-deep:    #9C7E4F;
  --gold-soft:    #D4BC8D;
  --gold-pale:    #EDE0C5;

  /* ── Semantic ───────────────────────────────── */
  --bg:           var(--ivory);
  --bg-soft:      var(--ivory-soft);
  --bg-deep:      var(--ivory-deep);
  --fg:           var(--charcoal);
  --fg-2:         var(--charcoal-2);
  --fg-3:         var(--charcoal-3);
  --accent:       var(--gold);
  --accent-deep:  var(--gold-deep);
  --border:       var(--line);

  /* ── Typography ─────────────────────────────── */
  --font-serif:   'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  --font-sans:    'Pretendard Variable', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* ── Font Sizes ─────────────────────────────── */
  --fs-display-xl: clamp(56px, 7vw, 96px);
  --fs-display-l:  clamp(40px, 5.5vw, 64px);
  --fs-display-m:  clamp(32px, 4vw, 48px);
  --fs-h1:         clamp(28px, 3.2vw, 40px);
  --fs-h2:         clamp(22px, 2.4vw, 28px);
  --fs-h3:         clamp(18px, 1.8vw, 22px);
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-label:      12px;
  --fs-micro:      11px;

  /* ── Line Heights ───────────────────────────── */
  --lh-display:   1.05;
  --lh-heading:   1.18;
  --lh-body:      1.65;
  --lh-tight:     1.35;

  /* ── Letter Spacing ─────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-label:  0.18em;
  --tracking-wide:   0.08em;

  /* ── Font Weights ───────────────────────────── */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ── Spacing (4px base) ─────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-30: 120px;

  /* ── Layout ─────────────────────────────────── */
  --container:    1280px;
  --gutter:       80px;
  --gutter-m:     32px;
  --gutter-s:     16px;
  --header-h:     72px;

  /* ── Radii ──────────────────────────────────── */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    4px;
  --r-full: 999px;

  /* ── Shadows ────────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.10);

  /* ── Motion ─────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.05, 0.68, 0.19);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  360ms;

  /* ── Compat Aliases (기존 변수명 호환, 점진적 제거 예정) ── */

  /* transito-black.css / 일반 페이지 계열 */
  --bg-primary:    var(--bg);
  --bg-secondary:  var(--bg-soft);
  --bg-card:       var(--bg-deep);
  --bg-card-hover: var(--ivory-deep);
  --text-primary:  var(--fg);
  --text-secondary: rgba(31,29,26,0.75);
  --text-muted:    rgba(31,29,26,0.55);
  --text-subtle:   rgba(31,29,26,0.35);
  --text:          var(--fg);
  --muted:         var(--fg-3);
  --white:         var(--fg);
  --card:          var(--bg-deep);

  /* Border aliases */
  --border-subtle: rgba(31,29,26,0.06);
  --border-light:  rgba(31,29,26,0.10);
  --border-gold:   rgba(184,153,104,0.2);

  /* Gold aliases */
  --gold-light:    var(--gold-soft);
  --gold-dim:      rgba(184,153,104,0.15);
  --gold-border:   rgba(184,153,104,0.25);

  /* Typography aliases */
  --font-serif-kr: var(--font-sans);
  --text-sm:       var(--fs-small);
  --text-md:       var(--fs-body);
  --text-m:        var(--fs-body);

  /* Effect aliases */
  --shadow-sm:     var(--shadow-1);
  --shadow-md:     var(--shadow-2);
  --shadow-soft:   var(--shadow-2);
  --sp-border:     1px solid var(--border);

  /* Semantic colors */
  --green:       #22C55E;
  --pink:        #F0B7C9;
  --caution-red: #EF4444;
  --danger:      #EF4444;
}

/* ── Dark Mode ──────────────────────────────────── */
[data-theme="dark"] {
  --bg:       var(--charcoal-bg);
  --bg-soft:  #1C1915;
  --bg-deep:  #25211B;
  --fg:       #F0E9D8;
  --fg-2:     #C8BEA8;
  --fg-3:     #847D6E;
  --line:     #2E2A23;
  --line-soft:#25221B;
  --paper:    #1A1713;
  --border:   #2E2A23;
}

/* =========================================================
   Utility Classes
   ========================================================= */

.serif    { font-family: var(--font-serif); }
.sans     { font-family: var(--font-sans); }

.overline, .label-sm {
  font-family:    var(--font-sans);
  font-size:      var(--fs-micro);
  font-weight:    var(--w-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color:          var(--fg-3);
}

.gold-rule {
  display:    block;
  width:      32px;
  height:     1px;
  background: var(--gold);
  flex-shrink: 0;
}

.divider-thin {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }

/* ── Placeholder image (when no real image) ─────── */
.ph {
  background: linear-gradient(135deg, rgba(184,153,104,0.15) 0%, rgba(31,29,26,0.25) 100%), var(--ivory-deep);
  position: relative;
  overflow: hidden;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(31,29,26,0.3),   transparent 60%);
  mix-blend-mode: overlay;
}