/* ============================================================
   DMUS — Design Tokens
   ------------------------------------------------------------
   Single source of truth for dmus_landing.
   Brand: 디엠어스 (DMUS) — 마케팅 & 영상제작 전문 회사
   Mode: Light + dark-overlay hero sections
   Philosophy: bold editorial · cinematic · crimson accent over photo
   Source: parity rebuild of https://www.dmus.kr/
   ============================================================ */

:root {
  /* ── COLOR ───────────────────────────────────────────────── */
  --color-bg:              #FFFFFF;
  --color-bg-subtle:       #F5F5F5;
  --color-bg-inverse:      #111111;

  --color-ink-900:         #111111;
  --color-ink-800:         #212121;
  --color-ink-700:         #363636;
  --color-ink-600:         #404040;
  --color-ink-500:         #6B6B6B;
  --color-ink-400:         #8A8A8A;
  --color-ink-300:         #BDBDBD;
  --color-ink-200:         #E0E0E0;
  --color-ink-100:         #F5F5F5;

  --color-on-dark:         #FFFFFF;
  --color-on-dark-muted:   rgba(255, 255, 255, 0.82);
  --color-border-on-dark:  rgba(255, 255, 255, 0.5);

  /* Brand accent — crimson from original #c41c1e */
  --color-accent:          #C41C1E;
  --color-accent-hover:    #A81719;
  --color-accent-soft:     #F4D4D4;
  --color-accent-contrast: #FFFFFF;

  /* Overlays on hero photo sections */
  --color-overlay-strong:  rgba(17, 17, 17, 0.55);
  --color-overlay-soft:    rgba(17, 17, 17, 0.28);
  --color-overlay-hero:    rgba(33, 33, 33, 0.89);

  /* Header background overlays */
  --color-overlay-glass:   rgba(255, 255, 255, 0.02);
  --color-overlay-scroll:  rgba(17, 17, 17, 0.6);

  /* Side dot default background */
  --color-border-on-dark-strong: rgba(255, 255, 255, 0.5);

  /* Nav / CTA additions (v2) */
  --color-nav:          rgba(33, 33, 33, 0.89);
  --color-nav-active:   #C41C1E;
  --color-border-cta:   rgba(255, 255, 255, 0.5);

  /* Semantic */
  --color-focus:           #C41C1E;
  --color-link:            #111111;
  --color-link-hover:      #C41C1E;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-display: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-sans:    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  --font-brand:   "Aharoni", "Pretendard Variable", sans-serif;

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

  /* Fluid type scale */
  --text-2xs:     0.6875rem;                                        /* 11 */
  --text-xs:      0.75rem;                                          /* 12 */
  --text-sm:      0.875rem;                                         /* 14 — nav */
  --text-base:    1rem;                                             /* 16 */
  --text-md:      clamp(1.0625rem, 0.5vw + 0.95rem, 1.125rem);      /* 17–18 */
  --text-lg:      clamp(1.25rem, 0.8vw + 1.1rem, 1.5rem);           /* 20–24 */
  --text-xl:      clamp(1.5rem, 1.5vw + 1.1rem, 2rem);              /* 24–32 */
  --text-2xl:     clamp(2rem, 2.5vw + 1.2rem, 3rem);                /* 32–48 */
  --text-hero:    clamp(2.5rem, 4vw + 1.2rem, 4.5rem);              /* 40–72 — section titles */

  /* Leading */
  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-loose:   1.7;

  /* Tracking */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;  /* nav caps, brand wordmark */

  /* ── SPACE ───────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --container-max:    1440px;
  --container-narrow: 960px;
  --header-height:    90px;
  --header-height-mobile: 64px;

  /* ── RADIUS ──────────────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* ── BORDER ──────────────────────────────────────────────── */
  --border-hairline: 1px solid var(--color-ink-200);
  --border-on-dark:  1px solid rgba(255, 255, 255, 0.6);

  /* ── SHADOW ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.18);

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease-emphasis:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:    linear;

  --dur-instant:  120ms;
  --dur-fast:     240ms;
  --dur-base:     400ms;
  --dur-section:  700ms;  /* section snap transition */
  --dur-slow:     1000ms;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-header:   500;
  --z-overlay:  900;
  --z-modal:    1000;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-section: 0ms;
    --dur-slow:    0ms;
  }
}