/* ==========================================================================
   결 스튜디오 (KYUL STUDIO) — Design Tokens
   Source of truth: analysis/tokens.brand.json
   ========================================================================== */
:root{
  /* ---- color ---- */
  --color-bg: #F5F4EF;
  --color-bg-dark: #121016;
  --color-surface-panel: #ECE9E2;
  --color-surface-panel-dark: #1C1A22;
  --color-text: #121016;
  --color-text-on-dark: #F5F4EF;
  --color-muted: #6E6B63;
  --color-muted-on-dark: #9C99A6;
  --color-border: #D9D6CC;
  --color-border-on-dark: #332F3B;
  --color-accent: #4A55FF;
  --color-accent-soft: #8A5CFF;
  --color-accent-on-accent: #F5F4EF;

  /* ---- typography ---- */
  --font-display: 'Archivo', 'Pretendard Variable', sans-serif;
  --font-serif: 'Fraunces', 'Pretendard Variable', serif;
  --font-body: 'Pretendard Variable', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* fluid type scale */
  /* calibrated so 44px @390px viewport -> 116px @1440px viewport (spec's
     desktop reference value), capped at 116px beyond that */
  --fs-hero:        clamp(2.75rem, 1.08rem + 6.86vw, 7.25rem);   /* 44px -> 116px@1440 */
  --fs-h2:           clamp(1.9rem, 1.4rem + 2.2vw, 3.5rem);      /* 30px -> 56px */
  --fs-wordmark:     clamp(4rem, -1rem + 20vw, 13.75rem);        /* 64px -> 220px */
  --fs-wordmark-sm:  clamp(3.25rem, 0.8rem + 10vw, 10rem);       /* footer wordmark */
  --fs-quote:        clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);     /* 24px -> 44px */
  --fs-body:         clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);  /* 15px -> 17px */
  --fs-eyebrow:      0.75rem;                                    /* 12px */
  --fs-stat:          clamp(2.5rem, 1.5rem + 4vw, 5rem);

  --lh-hero: 1.02;
  --lh-quote: 1.25;
  --lh-body: 1.6;
  --ls-hero: -0.04em;
  --ls-eyebrow: 0.22em;

  /* ---- spacing (8px unit) ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 56px;
  --space-xl: 96px;
  --space-xxl: 140px;

  /* ---- layout ---- */
  --max-width: 1280px;
  --gutter: 20px;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---- radius ---- */
  --radius-none: 0;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-panel: 64px;
  --radius-pill: 9999px;

  /* ---- shadow ---- */
  --shadow-float: 0 6px 20px rgba(18,16,22,0.18);

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(0.4,0,0.2,1);
  --ease-reveal: cubic-bezier(0.16,1,0.3,1);
  --ease-wipe: cubic-bezier(0.65,0,0.35,1);
  --dur-micro: 150ms;
  --dur-tilt: 300ms;
  --dur-mask: 350ms;
  --dur-wipe: 700ms;

  /* nav */
  --nav-h: 76px;

  /* shared film-grain noise texture (inline SVG feTurbulence, no HTTP request) */
  --grain-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* consistent photo grading across all real photography (§ image integration) */
  --grade-filter: saturate(0.72) contrast(1.06) brightness(0.96);
}

@media (min-width: 768px){
  :root{ --gutter: 32px; --nav-h: 84px; }
}
@media (min-width: 1024px){
  :root{ --gutter: 40px; }
}