/* ============================================================================
   tokens.css — design tokens harvested from analysis/05-design-system.json
   Every value below is traceable to a measured token. Provenance is noted as:
     [derived]  = measured on the reference implementation
     [filled]   = gap in the measurement package, designed here (see README)
   ========================================================================== */

:root {
  /* --- color -------------------------------------------------------------
     Declared custom properties on the reference are exactly four. [derived]  */
  --ivory:  #fffff5;
  --black:  #000000;
  --white:  #ffffff;
  --yellow: #dbff00;

  /* 스크램블 전용 비비드 액센트. 이 시스템은 원래 2색이라, 이 세 값은
     "섞이는 동안의 글자"에만 쓰이고 확정되면 사라집니다. 라임이 대부분이고
     나머지는 가끔 끼어드는 정도입니다. */
  --vivid-lime: #dbff00;
  --vivid-orange: #ff6a13;
  --vivid-cyan: #00e0ff;
  --vivid-magenta: #ff2d95;

  /* Untokenised literals that appear often enough to be real tokens.
     Promoted here rather than hardcoded — same values, named. [derived]      */
  --ink-soft:      rgb(51, 51, 51);        /* 60 nodes, dark surfaces        */
  --ink-softer:    rgb(83, 83, 83);        /* .is-contact chip hover         */
  --film:          rgb(245, 247, 229);     /* thumbnail plate, 42 nodes      */
  --veil-light:    rgba(255, 255, 255, 0.1);
  --veil-dark-04:  rgba(0, 0, 0, 0.04);    /* rail hover                     */
  --veil-dark-05:  rgba(0, 0, 0, 0.05);
  --veil-dark-10:  rgba(0, 0, 0, 0.1);     /* chip hover                     */

  /* Semantic pairs. The system's only colour device is inversion. [derived] */
  --page-bg:  var(--ivory);
  --page-fg:  var(--black);
  --invert-bg: var(--black);
  --invert-fg: var(--ivory);

  /* --- type --------------------------------------------------------------
     The whole scale hangs off one viewport-width-bound base. [derived]       */
  /* Hard readability floor. Every role that could resolve below this is
     wrapped in max(), so no text anywhere renders under 16px regardless of
     viewport or em nesting depth. Above ~1522px the fluid law takes over
     again and the site scales as measured. */
  --t-min: 16px;
  --font-base: max(var(--t-min), 0.92vw);
  /* One stack, two scripts. Lato has no Hangul, so Korean text falls through
     to IBM Plex Sans KR on its own — no per-element font switching, no
     :lang() rules. Order matters: Lato must come first or Plex would claim
     the Latin glyphs too. Both OFL.                                          */
  --font-body: "Lato", "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Malgun Gothic", sans-serif;
  --font-display: var(--font-body);

  /* Weight vocabulary retuned to what these two families actually ship:
     Lato has 400/700/900, Plex KR has 400/500/600/700.

     --w-black is 700, NOT 900. 900 exists only in Lato, so any Korean text
     asking for it gets a browser-SYNTHESISED bold — smeared, uneven strokes.
     700 is the heaviest weight both families really have, so Hangul and Latin
     both render from a real face. The display word-mark sets 900 on itself,
     because that text is Latin only.                                        */
  --w-regular: 400;
  --w-medium:  600;
  --w-black:   700;

  /* Display tier — the site's own. Heading tier is Webflow default. */
  --t-display-xl: 11em;
  --t-display-l:  6em;
  --t-display-m:  5em;
  --t-display-s:  3.2em;
  --t-h1: 6em;
  --t-h2: 5em;
  --t-h3: 4em;
  --t-h4: clamp(var(--t-min), 1em, 17px);
  /* 상단바 전용 크기. 로고와 링크가 이 하나로 함께 움직입니다. */
  --t-nav: calc(var(--t-h4) * 1.8);
  --t-h5: 2em;
  --t-h6: max(var(--t-min), 0.75em);
  --t-allcaps: clamp(var(--t-min), 0.9em, 18px);
  --t-xsmall: max(var(--t-min), 0.7em);
  --t-small:  max(var(--t-min), 0.8em);
  --t-big:    max(var(--t-min), 1.15em);
  --t-xbig:   max(var(--t-min), 1.25em);

  --lh-tight:   0.75;   /* .big-title            */
  --lh-snug:    0.95;   /* small all-caps labels */
  --lh-h1:      1.1;
  --lh-base:    1.25;
  --ls-caps:    0.03em; /* 0.363093px @ 12.1px base */

  /* --- spacing -----------------------------------------------------------
     0.5em base unit, doubling spine 0.5→1→2→4→8. [derived]                  */
  --s-025: 0.4em;   /* outlier kept: button padding trim */
  --s-05:  0.5em;
  --s-1:   1em;
  --s-15:  1.5em;
  --s-2:   2em;
  --s-25:  2.5em;
  --s-35:  3.5em;
  --s-4:   4em;
  --s-5:   5em;
  --s-6:   6em;
  --s-8:   8em;
  --s-12:  12em;

  /* --- surface -----------------------------------------------------------
     No elevation axis exists: zero site-owned box-shadows. Depth is made of
     z-index and backdrop blur only. Do not add shadows. [derived]           */
  --radius: 0.16em;      /* 1.9365px @ 12.1px base */
  --radius-round: 50%;
  --blur-near: 2em;
  --blur-mid:  5em;
  --blur-far:  6em;

  /* --- motion ------------------------------------------------------------ */
  --d-micro:  0.2s;   /* opacity / background-color — 628 nodes */
  --d-pad:    0.3s;   /* thumbnail padding                      */
  --d-quick:  0.4s;   /* burger / logo                          */
  --d-rail:   0.45s;  /* rail label `top`                       */
  --d-roll:   0.5s;   /* nav word roll                          */
  --d-hero:   1s;     /* big-title-wrap                         */
  --d-menu:   1.4s;   /* burger master sequence                 */
  --d-reel:   3s;     /* reel mask wipe                         */
  /* 패널이 열리는 커튼. reel 과 같은 몸짓이지만 3초는 페이지를 옮길 때마다
     기다리게 만듭니다. 곡선은 같게 두고 시간만 줄입니다. */
  --d-curtain: 0.85s;
  /* 화면을 바꾸는 막. 덮고(sweep) 걷는 두 번을 합쳐 커튼 한 번과 같은
     시간이 되도록 절반으로 잡습니다. */
  --d-sweep: 0.62s;

  --e-ease:      ease;
  --e-quart:     cubic-bezier(0.77, 0, 0.175, 1);          /* easeInOutQuart / power4.inOut */
  --e-pad:       cubic-bezier(0.433, 0.013, 0, 1.001);     /* sharp start, long settle      */
  --e-quad-io:   cubic-bezier(0.455, 0.03, 0.515, 0.955);  /* power2.inOut */
  --e-cubic-io:  cubic-bezier(0.645, 0.045, 0.355, 1);     /* power3.inOut */
  --e-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);       /* power4.out   */
  --e-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);      /* power3.out   */
  --e-quad-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);     /* power2.out   */

  --stagger: 0.1s;  /* total amount, divided across targets */

  /* --- layout ------------------------------------------------------------ */
  --z-timeline: 10;
  --z-hero: 100;
  --z-detail: 500;
  --z-overlay: 999;

  --rail-top: 16.6vh;      /* 111/674 and 166/986 both land here [derived] */
  /* 29.5 -> 25.1em (15% 축소). 높이는 --plate-ar 로 풀리므로 폭만 줄이면
     비율은 그대로입니다. */
  --slide-w: 25.1em;       /* fixed; never varies with project count       */
  --gutter: 2em;           /* (1315 - 1267) / 2                 [derived]  */
  /* The hero block centres in the space ABOVE the strip, so the lift is half
     the strip block (cards + tick measure), not a fixed 4em. */
  --strip-block: calc(3.05em + (var(--slide-w) - 1.2em) * 0.625 + 1.7em);
  --hero-lift: calc(var(--strip-block) / -2);
}

/* Fluid law breaks down past the Webflow breakpoints; the reference swaps the
   display tier rather than the base. [derived from CSS overrides, runtime
   verification was blocked — see analysis gap G04] */
@media screen and (max-width: 991px) {
  :root {
    --font-base: max(var(--t-min), 1.6vw);
    --t-display-xl: 6.5em;
    --t-display-l: 6.5em;
    --lh-tight: 0.85;
    --rail-top: 14vh;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --font-base: max(var(--t-min), 2.4vw);
    --t-display-xl: 6em;
    --t-display-l: 6em;
    --slide-w: 22.1em;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --font-base: max(var(--t-min), 3.6vw);
    --t-display-xl: 5.4em;
    --t-display-l: 5.4em;
    --slide-w: 18.7em;
  }
}

/* The reference carries an aspect-ratio axis as well as a width axis — the
   easiest thing to miss when reproducing it. Short-and-wide viewports pull the
   display type down so the hero and the filmstrip still both fit. [derived]  */
@media screen and (min-width: 992px) and (max-width: 1400px) and (max-aspect-ratio: 10 / 7) {
  :root { --t-display-xl: 9em; --rail-top: 20vh; }
}