/* Namdo design tokens — generated from namdo-brand-spec.json
 * One source of truth for colors, type, spacing, motion.
 * Components reference these tokens; never hardcode values in component CSS.
 */

:root {
  /* ─── Color ───────────────────────────────────────────────────────
   * Mid-tone palette: a warm-leaning taupe — between the warm-brown and
   * cream we tried before. Foreground stays cream so type stays elegant.
   * Accent is a DULL warm gold, used in restrained flickers (light pools,
   * bullet separators), never as a bright halo.
   */

  /* Primary surface — mid-tone warm taupe */
  --color-bg: #4F4540;                 /* warm taupe, between brown and cream */
  --color-bg-soft: #5A4F49;            /* slightly lighter — for elevated regions */
  --color-bg-elevated: #443B36;        /* slightly darker — for footer / deep surfaces */

  /* Accent — dull warm gold. Quieter than the original amber. */
  --color-accent: #B89968;             /* dull gold, almost dusty bronze */
  --color-accent-deep: #997B4F;        /* hover/active */
  --color-accent-soft: rgba(184, 153, 104, 0.12);

  /* Petrol — cool counter-accent, kept */
  --color-petrol: #1F2D3A;

  /* Text — cream on mid-tone reads cleanly */
  --color-cream: #F5EFE6;              /* primary text */
  --color-cream-muted: rgba(245, 239, 230, 0.62);
  --color-ink: #1A1410;                /* dark ink — rare inverse use (filled buttons) */
  --color-ink-muted: rgba(26, 20, 16, 0.62);

  /* Lines & dividers — cream-tinted on the darker surface */
  --color-rule: rgba(245, 239, 230, 0.14);
  --color-rule-strong: rgba(245, 239, 230, 0.24);

  /* Tags & spice */
  --color-tag-bg: var(--color-accent-soft);
  --color-tag-fg: var(--color-accent);
  --color-spice: #C0392B;

  /* ─── Type ─── */
  --font-display: "Outfit", "Avenir Next", "Futura", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-korean: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", var(--font-body);

  --weight-display: 300;
  --weight-display-strong: 400;
  --weight-body: 400;
  --weight-body-strong: 500;

  /* Type scale — fluid */
  --fs-display: clamp(2.75rem, 7vw, 5rem);
  --fs-h1: clamp(2rem, 5vw, 3rem);
  --fs-h2: clamp(1.5rem, 3.5vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --leading-display: 1.05;
  --leading-tight: 1.15;
  --leading-body: 1.6;

  --tracking-display: -0.01em;
  --tracking-uppercase: 0.08em;

  /* ─── Spacing — 4px base ─── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-section: clamp(3rem, 8vw, 6rem);
  --space-edge: clamp(1.25rem, 5vw, 2.5rem);

  /* ─── Radii ─── */
  /* Namdo is "modern Korean / refined" — keep architectural, not playful */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ─── Motion ─── */
  /* Strong ease-out for UI entrance/exit (snappier than the CSS default) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-glass: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like, used for the glass entry */
  --duration-press: 160ms;
  --duration-fast: 180ms;
  --duration-base: 280ms;
  --duration-slow: 600ms;
  --duration-glass: 900ms;                          /* hero glass fade-in */
  --duration-walk-slow: 38s;                        /* ambient figure drift */
  --duration-walk-medium: 28s;
  --duration-walk-fast: 22s;

  /* ─── Shadow — restrained for moody brand ─── */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.2);
  --shadow-lifted: 0 4px 12px rgba(0,0,0,0.24), 0 16px 32px rgba(0,0,0,0.28);

  /* ─── Layout widths ─── */
  --width-prose: 60ch;
  --width-content: 72ch;
  --width-wide: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}