:root{
  /* Primitive: grid / spacing */
  --grid-base:8px;
  --grid-major:64px;
  --size-px:1px;
  --space-0:0;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-8:64px;
  --space-10:80px;
  --space-12:96px;
  --space-15:120px;
  --space-20:160px;

  /* Primitive: brand */
  --guide-blue:var(--primary-600);
  --guide-pink:var(--primary-500);
  --primary-50:#FFF4E5;
  --primary-100:#FFEFDB;
  --primary-150:#FFDFB6;
  --primary-200:#FFCF92;
  --primary-300:#FFC06D;
  --primary-400:#FFB049;
  --primary-500:#FFA024;
  --primary-600:#FF9000;
  --primary-700:#DC7D01;
  --primary-800:#B96A03;
  --primary-850:#965704;
  --primary-900:#734306;
  --primary-950:#503007;
  --primary-1000:#2D1D09;
  --primary:var(--primary-600);
  --primary-light-700:var(--primary-50);
  --primary-light-600:var(--primary-100);
  --primary-light-500:var(--primary-150);
  --primary-light-400:var(--primary-200);
  --primary-light-300:var(--primary-300);
  --primary-light-200:var(--primary-400);
  --primary-light-100:var(--primary-500);
  --primary-dark-100:var(--primary-700);
  --primary-dark-200:var(--primary-800);
  --primary-dark-300:var(--primary-850);
  --primary-dark-400:var(--primary-900);
  --primary-dark-500:var(--primary-950);
  --primary-dark-600:var(--primary-1000);
  --primary-dark-700:var(--gray-1000);

  /* Primitive: gray scale
     25 steps, perceptually uniform (OKLab interpolation)
     0 = #FFFFFF, 1000 = #0A0A0A */
  --gray-0:#FFFFFF;
  --gray-25:#F8F8F8;
  --gray-50:#F1F1F1;
  --gray-75:#EAEAEA;
  --gray-100:#E3E3E3;
  --gray-150:#D5D5D5;
  --gray-200:#C7C7C7;
  --gray-250:#B9B9B9;
  --gray-300:#ACACAC;
  --gray-350:#9E9E9E;
  --gray-400:#919191;
  --gray-450:#858585;
  --gray-500:#787878;
  --gray-550:#6C6C6C;
  --gray-600:#5F5F5F;
  --gray-650:#545454;
  --gray-700:#484848;
  --gray-750:#3D3D3D;
  --gray-800:#323232;
  --gray-850:#272727;
  --gray-900:#1D1D1D;
  --gray-925:#181818;
  --gray-950:#131313;
  --gray-975:#0F0F0F;
  --gray-1000:#0A0A0A;

  --white:var(--gray-0);
  --black:var(--gray-950);

  /* Legacy aliases (deprecated - migrate to --gray-*) */
  --mono-light-100:var(--gray-0);
  --mono-light-200:#FAFAFA;
  --mono-light-300:#F6F6F6;
  --mono-light-400:var(--gray-50);
  --mono-mid-100:var(--gray-200);
  --mono-mid-200:var(--gray-300);
  --mono-mid-300:var(--gray-350);
  --mono-mid-400:var(--gray-450);
  --mono-mid-500:var(--gray-500);
  --mono-mid-600:var(--gray-650);
  --mono-mid-700:var(--gray-700);
  --mono-mid-800:var(--gray-750);
  --mono-mid-900:var(--gray-800);
  --mono-dark-100:var(--gray-900);
  --mono-dark-200:var(--gray-925);
  --mono-dark-300:var(--gray-950);
  --mono-dark-400:var(--gray-1000);

  /* Semantic: theme (light) */
  --bg:var(--gray-0);
  --surface:var(--gray-25);
  --text-h-lg:var(--gray-950);
  --text-h-md:var(--gray-900);
  --text-h-sm:var(--gray-850);
  --text:var(--gray-800);
  --text-sub:var(--gray-600);
  --text-muted:var(--gray-550);
  --border:var(--gray-150);
  --border-strong:var(--gray-400);
  --amber:var(--primary);
  --amber-bg:var(--primary-light-600);
  --text-inverse:var(--white);
  --text-active-inverse:var(--white);
  --text-strong-dark:var(--gray-200);

  /* Semantic: grid paper */
  --grid-8:#FAFAFA;
  --grid-40:#F6F6F6;
  --grid-80:#F1F1F1;
  --grid-origin-x:50vw;
  --grid-origin-y:0px;

  /* Primitive: typography */
  --font-en:'Outfit','Pretendard Variable','Pretendard',sans-serif;
  --font-ko:'Pretendard Variable','Pretendard',sans-serif;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --type-h1-size:72px;
  --type-h1-line:80px;
  --type-h1-track:0;
  --type-h1-weight:var(--weight-bold);

  --type-h2-size:56px;
  --type-h2-line:64px;
  --type-h2-track:0;
  --type-h2-weight:var(--weight-bold);

  --type-h3-size:48px;
  --type-h3-line:56px;
  --type-h3-track:0;
  --type-h3-weight:var(--weight-bold);

  --type-h4-size:40px;
  --type-h4-line:48px;
  --type-h4-track:0;
  --type-h4-weight:var(--weight-bold);

  --type-h5-size:32px;
  --type-h5-line:40px;
  --type-h5-track:0;
  --type-h5-weight:var(--weight-semibold);

  --type-h6-size:24px;
  --type-h6-line:32px;
  --type-h6-track:0;
  --type-h6-weight:var(--weight-semibold);

  --type-body-size:14px;
  --type-body-line:24px;
  --type-body-track:0;
  --type-body-weight:var(--weight-regular);

  --type-caption-size:12px;
  --type-caption-line:16px;
  --type-caption-track:0;
  --type-caption-weight:var(--weight-regular);

  --type-display-body-size:18px;
  --type-display-body-line:32px;
  --type-display-body-track:0;
  --type-display-body-weight:var(--weight-regular);

  --type-body-lg-size:18px;
  --type-body-lg-line:24px;
  --type-token-caption-size:10px;
  --type-token-caption-line:16px;

  /* Component: GNB / theme button */
  --gnb-h:64px;
  --gnb-x:32px;
  --gnb-x-mobile:16px;
  --gnb-logo-w:119px;
  --gnb-logo-h:18px;
  --gnb-menu-gap:32px;
  --gnb-menu:var(--mono-mid-500);
  --gnb-menu-size:14px;
  --gnb-menu-line:24px;
  --gnb-menu-weight:var(--weight-regular);
  --gnb-menu-active-weight:var(--weight-medium);
  --theme-toggle-w:80px;
  --theme-toggle-h:32px;
  --theme-toggle-radius:16px;
  --theme-toggle-size:12px;
  --theme-toggle-line:24px;
  --theme-toggle-dot:8px;
  --theme-toggle-gap:8px;
  --theme-toggle-bg:var(--mono-light-100);
  --theme-toggle-border:var(--mono-mid-200);
  --theme-toggle-text:var(--mono-mid-200);
  --theme-toggle-hover-bg:var(--mono-dark-400);
  --theme-toggle-dot-bg:var(--primary);
  --theme-toggle-dot-border:transparent;
  --theme-toggle-dot-glow-1:rgb(255 160 36 / 60%);
  --theme-toggle-dot-glow-2:rgb(255 144 0 / 40%);
  --theme-toggle-moon-bg:var(--mono-light-100);
  --theme-toggle-moon-border:#CFF0FF;
  --theme-toggle-moon-glow:#67B8FF;
  --hamburger-size:40px;
  --hamburger-line-w:24px;
  --hamburger-line-h:1.5px;
  --hamburger-gap:8px;
  --hamburger-open-offset:9.5px;

  /* Component: work list */
  --page-bottom:80px;
  --page-x:32px;
  --page-x-mobile:16px;
  --bar-h:40px;
  --work-header-h:80px;
  --work-header-title-weight:500;
  --tag-gap:24px;
  --tag-active-h:24px;
  --tag-active-radius:12px;
  --more-h:64px;
  --work-card-meta-size:14px;
  --work-card-meta-line:24px;
  --work-card-meta-weight:var(--weight-regular);
  --work-card-title-size:18px;
  --work-card-title-line:24px;
  --work-card-title-weight:var(--weight-regular);
  --work-card-pad-x:32px;
  --work-card-pad-y:24px;
  --work-card-body-min:96px;

  /* Component: work detail format 01 */
  --detail-back-h:40px;
  --detail-back-track:.1em;
  --project-header-y:80px;
  --project-label-track:.12em;
  --project-title-size:32px;
  --project-title-line:40px;
  --project-title-weight:var(--weight-light);
  --project-ko-mt:var(--space-1);
  --project-tag-h:32px;
  --project-tag-radius:16px;
  --block-full-min:800px;
  --block-full-min-mobile:480px;
  --block-half-min:640px;
  --block-half-min-mobile:320px;
  --block-side-pad-y:80px;
  --block-side-pad-x:40px;
  --block-side-pad-mobile:40px;
  --block-caption-h:40px;
  --block-caption-gap:64px;
  --block-caption-track:.1em;
  --media-label-track:.12em;
  --media-label-muted:rgb(255 255 255 / 30%);
  --media-label-soft:rgb(255 255 255 / 45%);
  --media-mark-muted:rgb(255 255 255 / 20%);
  --media-control-border:rgb(255 255 255 / 25%);
  --media-control-fill:rgb(255 255 255 / 60%);
  --work-intro-min:480px;
  --work-intro-min-mobile:400px;
  --work-intro-pad-y:96px;
  --work-intro-pad-x:32px;
  --work-intro-pad-y-mobile:80px;
  --work-intro-pad-bottom-mobile:48px;
  --work-intro-title-max:1120px;
  --work-intro-title-size:72px;
  --work-intro-title-line:80px;
  --work-intro-title-track:var(--type-h1-track);
  --work-intro-title-weight:700;
  --work-subtitle-size:24px;
  --work-subtitle-line:32px;
  --work-subtitle-weight:var(--weight-regular);
  --work-subtitle-mt:var(--space-2);
  --work-subtitle-ko-size:20px;
  --work-subtitle-ko-mobile-size:16px;
  --work-summary-mt:80px;
  --work-summary-mb:40px;
  --work-summary-gap:32px;
  --work-summary-size:var(--type-display-body-size);
  --work-summary-line:var(--type-display-body-line);
  --work-summary-weight:var(--type-display-body-weight);
  --detail-meta-pad-y:96px;
  --detail-meta-pad-y-mobile:64px;
  --detail-meta-max:1200px;
  --detail-meta-columns:4;
  --detail-meta-gap:32px;
  --detail-meta-gap-mobile:48px;
  --detail-info-label-track:.08em;
  --detail-info-label-weight:var(--weight-regular);
  --detail-info-value-size:18px;
  --detail-info-value-line:32px;
  --detail-info-value-weight:var(--weight-regular);
  --detail-grid-2x2-pad-y:32px;
  --detail-grid-2x2-pad-x:32px;
  --detail-grid-2x2-gap:16px;
  --detail-grid-2x2-caption-offset:calc(var(--detail-grid-2x2-pad-y) * -1);
  --detail-grid-1x2-pad-y:32px;
  --detail-grid-1x2-pad-x:32px;
  --detail-grid-1x2-gap:16px;
  --detail-grid-1x2-caption-offset:calc(var(--detail-grid-1x2-pad-y) * -1);
  --detail-split-1-2-pad-y:32px;
  --detail-split-1-2-pad-x:32px;
  --detail-split-1-2-gap:16px;
  --detail-split-1-2-caption-offset:calc(var(--detail-split-1-2-pad-y) * -1);
  --warum-statement-body-mt:var(--space-2);
  --warum-accent-pad-y-mobile:var(--space-10);
  --rule-overlap:calc(var(--size-px) * -1);

  /* Component: footer / controls */
  --footer-bar-h:40px;
  --footer-info-h:64px;
  --footer-open-h:104px;
  --footer-x:32px;
  --footer-gap:16px;
  --footer-arrow-box:24px;
  --footer-arrow-w:10px;
  --footer-arrow-h:1.5px;
  --footer-arrow-top:11px;
  --footer-arrow-inset:4px;
  --footer-letter-track:.06em;
  --top-btn-size:40px;
  --top-btn-bottom:48px;
  --top-btn-bottom-footer-open:112px;
  --top-btn-right:32px;

  /* Component: about / contact */
  --content-narrow:800px;
  --content-col:384px;
  --content-y:160px;
  --content-y-mobile:120px;
  --about-copy-gap:48px;
  --about-rule-gap-top:80px;
  --about-rule-gap-bottom:80px;
  --service-meta-gap:32px;
  --contact-intro-gap:80px;
  --contact-btn-h:80px;
  --contact-brief-h:40px;

  /* Motion */
  --motion-fast:.2s;
  --motion-base:.3s;
  --motion-grid:.4s;
  --motion-card-hover:.45s;
  --motion-contact-base:.52s;
  --motion-contact-hover:.48s;
  --motion-reveal:1.1s;
  --ease-standard:cubic-bezier(.22,1,.36,1);
  --ease-reveal:cubic-bezier(.16,1,.3,1);
  --ease-contact:cubic-bezier(.72,0,.18,1);
  --scale-card-hover:1.04;
  --reveal-y:48px;
  --reveal-y-preview:32px;
}

[data-theme="dark"]{
  --bg:var(--gray-1000);
  --surface:var(--gray-925);
  --text-h-lg:var(--gray-50);
  --text-h-md:var(--gray-100);
  --text-h-sm:var(--gray-150);
  --text:var(--gray-200);
  --text-sub:var(--gray-450);
  --text-muted:var(--gray-500);
  --border:var(--gray-800);
  --border-strong:var(--gray-600);
  --amber-bg:var(--primary-dark-600);
  --text-active-inverse:var(--black);
  --gnb-menu:var(--gray-350);
  --grid-8:#0D0D0D;
  --grid-40:#101010;
  --grid-80:#141414;
  --theme-toggle-bg:var(--gray-1000);
  --theme-toggle-border:var(--gray-650);
  --theme-toggle-text:var(--gray-650);
  --theme-toggle-hover-bg:var(--gray-0);
  --theme-toggle-dot-bg:var(--gray-0);
  --theme-toggle-dot-border:var(--theme-toggle-moon-border);
  --theme-toggle-dot-glow-1:var(--theme-toggle-moon-glow);
  --theme-toggle-dot-glow-2:transparent;

  --type-h1-weight:var(--weight-semibold);
  --type-h2-weight:var(--weight-semibold);
  --type-h3-weight:var(--weight-semibold);
  --type-h4-weight:var(--weight-semibold);
  --type-h5-weight:var(--weight-medium);
  --type-h6-weight:var(--weight-medium);
}