/* ============================================================
   DANDAN — Design Tokens
   ------------------------------------------------------------
   Single source of truth for the dandan-landing project.
   Brand: 스타일링단단
   Mode: Light only
   Philosophy: editorial minimalism · premium · quiet luxury
   References distilled from: labotory, apartmentary, hyphendesign,
   spacebase, eugonggan (Korean studio portfolio DNA).
   ============================================================ */

:root {
  /* ── COLOR ───────────────────────────────────────────────── */
  /* Neutral scale (warm off-white base, not pure white) */
  --color-bg:              #FAF8F5;   /* page background — warm off-white */
  --color-bg-elevated:     #FFFFFF;   /* card surfaces */
  --color-bg-subtle:       #F2EEE8;   /* alt section stripe */
  --color-bg-inverse:      #151413;   /* footer / inverse sections */

  --color-ink-900:         #151413;   /* display headline */
  --color-ink-800:         #1F1D1B;   /* h1–h3 */
  --color-ink-700:         #2C2A27;   /* body strong */
  --color-ink-500:         #6B6660;   /* body */
  --color-ink-400:         #8F8A82;   /* secondary / meta */
  --color-ink-300:         #C4BFB6;   /* divider strong */
  --color-ink-200:         #E3DED5;   /* divider / hairline */
  --color-ink-100:         #EFEAE1;   /* muted surface */

  /* Accent — warm beige (user-specified #D4C4B0) */
  --color-accent:          #D4C4B0;
  --color-accent-hover:    #C2B098;
  --color-accent-soft:     #EBE2D4;
  --color-accent-contrast: #151413;   /* text on accent */

  /* Semantic */
  --color-focus:           #1F1D1B;
  --color-link:            #151413;
  --color-link-hover:      #6B6660;

  /* ── TYPOGRAPHY ──────────────────────────────────────────── */
  /* Fonts — loaded via <link> in index.html */
  --font-display: "Fraunces", "Noto Serif KR", Georgia, serif;
  --font-sans:    "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weight */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  /* Fluid type scale — clamp(min, vw-based, max).
     Ratio ≈ 1.333 (perfect fourth). Desktop baseline 16px. */
  --text-2xs:     0.6875rem;   /* 11px — eyebrow */
  --text-xs:      0.75rem;     /* 12px — meta */
  --text-sm:      0.875rem;    /* 14px — caption */
  --text-base:    1rem;        /* 16px — body */
  --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-3xl:     clamp(2.75rem, 4vw + 1.4rem, 4.5rem);            /* 44–72 */
  --text-4xl:     clamp(3.5rem, 6vw + 1.4rem, 6.5rem);             /* 56–104 display */

  /* Leading */
  --leading-tight:   1.08;     /* display */
  --leading-snug:    1.2;      /* headings */
  --leading-normal:  1.5;      /* body */
  --leading-loose:   1.7;      /* long copy */

  /* Tracking */
  --tracking-tighter: -0.03em;  /* display serif */
  --tracking-tight:   -0.015em; /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.08em;   /* eyebrows / labels (uppercase) */
  --tracking-widest:  0.18em;   /* nav, caps */

  /* ── SPACE ───────────────────────────────────────────────── */
  /* 4px baseline grid */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4 */
  --space-2:   0.5rem;    /* 8 */
  --space-3:   0.75rem;   /* 12 */
  --space-4:   1rem;      /* 16 */
  --space-5:   1.5rem;    /* 24 */
  --space-6:   2rem;      /* 32 */
  --space-7:   2.5rem;    /* 40 */
  --space-8:   3rem;      /* 48 */
  --space-9:   4rem;      /* 64 */
  --space-10:  5rem;      /* 80 */
  --space-11:  6rem;      /* 96 */
  --space-12:  8rem;      /* 128 */
  --space-13:  10rem;     /* 160 */
  --space-14:  12rem;     /* 192 */

  /* Section rhythm — enforced by evaluator: min 120px between adjacent sections */
  --section-gap:   clamp(6rem, 8vw, 10rem);       /* 96–160 */
  --section-gap-sm: clamp(4rem, 6vw, 6rem);       /* 64–96 tight rhythm */

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max:      88rem;       /* 1408px — wide editorial */
  --container-narrow:   64rem;       /* 1024px — long-form text */
  --container-pad:      clamp(1.25rem, 4vw, 3rem);  /* 20–48 side padding */
  --grid-gap:           clamp(1rem, 2vw, 1.75rem);  /* 16–28 */

  /* Breakpoints (reference only — used via media queries) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── RADIUS ─────────────────────────────────────────────── */
  /* Editorial aesthetic → small/zero radius. NO pill/rounded cards. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-full: 999px;  /* only for dots/avatars, not buttons */

  /* ── SHADOW ─────────────────────────────────────────────── */
  /* Avoid drop-shadows. Use hairline borders + subtle lift on hover only. */
  --shadow-none:   none;
  --shadow-hairline: 0 0 0 1px var(--color-ink-200);
  --shadow-lift:   0 1px 2px rgba(21,20,19,0.04), 0 12px 32px rgba(21,20,19,0.06);

  /* ── MOTION ─────────────────────────────────────────────── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast:   180ms;
  --duration-base:   320ms;
  --duration-slow:   480ms;
  --duration-slower: 820ms;

  --transition-color: color var(--duration-fast) var(--ease-out-quart),
                      background-color var(--duration-fast) var(--ease-out-quart),
                      border-color var(--duration-fast) var(--ease-out-quart);
  --transition-transform: transform var(--duration-base) var(--ease-out-expo);
  --transition-all: all var(--duration-base) var(--ease-out-expo);

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-overlay: 80;
  --z-modal:   90;
  --z-toast:   100;

  /* ── ASPECT RATIOS (portfolio images) ───────────────────── */
  --ratio-hero:      16 / 9;
  --ratio-portrait:  3 / 4;    /* default Works grid tile */
  --ratio-landscape: 4 / 3;
  --ratio-wide:      21 / 9;
  --ratio-square:    1 / 1;

  /* V2 reveal — overrides --duration-slow for [data-reveal] only */
  --duration-reveal: 920ms;
  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
  --translate-reveal: 64px;
  --stagger-reveal: 120ms;
}

/* ============================================================
   Base resets / global type defaults — consumers of the tokens
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--color-ink-800);
  background: var(--color-bg);
  font-feature-settings: "ss01", "ss02", "cv01", "kern";
}

/* Display headline — serif, tight */
.display,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-ink-900);
}

/* Eyebrow — tiny uppercase label above sections */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-ink-500);
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}