/* ==========================================================================
   root64 Design Tokens — generated from .claude/DESIGN-SPEC.md §1
   Source: PR #60 (claude/gracious-wu-95142f) hi-fi handoff
   Status: provisional — superseded when rwa-frontend official tokens ship
   DO NOT write raw hex/#... or Npx literals in component CSS — use these tokens.
   ========================================================================== */

:root {
  /* ── §1.1 Color — light ───────────────────────────────────────────────── */
  --color-ink:            #14213d;  /* body text, dark surfaces (nav btn, contact band) */
  --color-ink-deep:       #1a2a4e;  /* ink variant */
  --color-ink-soft:       #4e5872;  /* secondary text, labels, captions */
  --color-accent:         #b87145;  /* copper — eyebrow, <em>, hover, live dot */
  --color-accent-bright:  #d18a5c;  /* accent on dark bg (contact <em>) */
  --color-accent-soft:    #e8c8b0;  /* subtle accent surface */
  --color-surface:        #f5f0e8;  /* page bg (cream) */
  --color-surface-sunken: #ebe5d9;  /* recessed surface (table thead) */
  --color-surface-raised: #faf6ee;  /* card/panel surface (paper) */
  --color-border:         rgba(20, 33, 61, 0.10); /* default divider/border */
  --color-border-strong:  rgba(20, 33, 61, 0.20); /* strong border (card edge, pill) */

  /* ── §1.2 Color — dark (html.dark overrides) — Q14: dark-mode toggle TBD ─
     Dark mode scaffolding is OMITTED per spec §2.9 + mockup instruction.
     These dark values are listed here for reference only; no toggle is rendered.
     → Q14: 다크모드 토글 포함 여부·기본값 (랜딩 페이지 포함 미결)               */

  /* ── §1.3 Typography ─────────────────────────────────────────────────── */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale */
  --type-display:    clamp(40px, 5.2vw, 68px);
  --type-title:      clamp(32px, 4.2vw, 52px);
  --type-title-lg:   clamp(36px, 4.8vw, 60px);
  --type-heading:    30px;
  --type-subheading: 24px;
  --type-body-lg:    18px;
  --type-body:       16px;
  --type-body-sm:    14px;
  --type-label:      11px;   /* mono / uppercase / letter-spacing 0.18em */
  --type-data-xl:    44px;   /* mono — Snapshot featured figure */
  --type-data-lg:    30px;   /* mono — Snapshot general figure */
  --type-data-md:    24px;   /* mono — Snapshot secondary figure */

  /* ── §1.4 Spacing ─────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;
  --space-30: 120px;

  /* ── §1.5 Layout ──────────────────────────────────────────────────────── */
  --layout-max:            1280px;
  --layout-pad:            56px;
  --layout-pad-mobile:     22px;
  --layout-section-y:      120px;
  --layout-section-y-mobile: 64px;
  --layout-nav-h:          72px;

  /* ── §1.6 Radius / Shadow / Motion ───────────────────────────────────── */
  --radius-sharp: 0;       /* card·button·table·panel — BRAND SIGNATURE */
  --radius-pill:  999px;   /* pill + toggle ONLY */

  --shadow-card: 0 1px 0 rgba(20, 33, 61, 0.04),
                 0 20px 40px -20px rgba(20, 33, 61, 0.12);

  --ease-standard:  cubic-bezier(0.5, 0, 0.2, 1);
  --motion-fast:    0.12s;   /* button press */
  --motion-base:    0.18s;   /* hover transition */
  --motion-toggle:  0.22s;   /* mode toggle knob */
  --motion-theme:   0.3s;    /* bg/text colour switch */
  --motion-reveal:  0.7s;    /* scroll reveal */

  /* ── Pending Tokens (DESIGN-SPEC §1 undefined — named placeholders) ──── */
  /* → Q12: 풀 상태 배지·리스크 지표 색상 미정의 (법무·디자인 결정 필요)      */
  --color-status-active:    var(--color-accent-placeholder);      /* PENDING Q12 */
  --color-status-closed:    var(--color-ink-soft-placeholder);    /* PENDING Q12 */
  --color-status-pending:   var(--color-accent-soft-placeholder); /* PENDING Q12 */
  --color-risk-low:         var(--color-risk-low-placeholder);    /* PENDING Q12 */
  --color-risk-medium:      var(--color-risk-medium-placeholder); /* PENDING Q12 */
  --color-risk-high:        var(--color-risk-high-placeholder);   /* PENDING Q12 */
}