/* Makerlabs design tokens. Component styles must consume these values. */
:root {
  --font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-caption: 13px;
  --font-small: 14px;
  --font-body-sm: 15px;
  --font-body: 16px;
  --font-lead: 18px;
  --font-title-sm: 20px;
  --font-title: 24px;
  --font-heading-sm: 28px;
  --font-heading: 32px;
  --font-section: 36px;
  --font-display: 48px;
  --font-step: 56px;
  --font-amount: 64px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --tracking-body: -.01em;
  --tracking-heading: -.03em;
  --tracking-label: .04em;
  --leading-body: 1.65;
  --leading-heading: 1.35;
  --primary: #3465ff;
  --action: var(--primary);
  --primary-hover: #2855e6;
  --weak: #edf2ff;
  --ink: #0b0f19;
  --night: var(--ink);
  --body: #4e5968;
  --muted: #6b7684;
  --muted-on-dark: #a5adbb;
  --surface: #f2f4f6;
  --canvas: #f7f8fa;
  --white: #fff;
  --line: #e5e8eb;
  --line-on-dark: #ffffff1f;
  --kakao: #fee500;
  --kakao-ink: #242015;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 56px;
  --space-9: 64px;
  --space-10: 72px;
  --space-11: 80px;
  --space-12: 88px;
  --space-13: 96px;
  --space-14: 104px;
  --space-15: 112px;
  --space-20: 160px;
  --section-gap: var(--space-10);
  --page-gutter: var(--space-4);
  --choice-height: 56px;
  --hero-space: var(--space-7);
  --button-height: 56px;
  --button-radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-card: 24px;
  --layout-header-width: 1080px;
  --layout-content-width: 1032px;
  --nav-height: 64px;
  --nav-border: var(--line);
}
@media (max-width: 767px) {
  :root { --section-gap: var(--space-7);  --hero-space: var(--space-5); }
}

/* Match tether_maker landing h-14 / lg:h-16 (1024px breakpoint). */
@media (max-width: 1023px) { :root { --nav-height: 56px; } }

/* Agency composition and motion tokens. */
:root {
 --hero-accent:#82a1ff;
 --hero-column-gap:var(--space-9);
 --hero-title-size:52px;
 --portfolio-ratio:1.6;
 --portfolio-stage-padding:var(--space-5);
 --portfolio-stage-dark:#182234;
 --portfolio-stage-light:#e9edf5;
 --motion-fast:180ms;
 --motion-reveal:560ms;
 --motion-ease:cubic-bezier(.22,1,.36,1);
 --portfolio-shadow:0 12px 32px #0b0f191f;
}
@media(max-width:1023px){:root{--hero-column-gap:var(--space-5);--hero-title-size:44px}}
@media(max-width:767px){:root{--hero-title-size:38px;--portfolio-stage-padding:var(--space-4)}}

/* Semantic typography. Edit role tokens instead of component overrides. */
:root {
 --tracking-card:-.02em;
 --type-section-size:var(--font-heading);
 --type-card-size:var(--font-title-sm);
 --type-option-size:var(--font-body);
 --type-home-option-size:var(--font-body-sm);
 --type-support-size:var(--font-small);
 --type-button-size:var(--font-body);
 --type-compact-button-size:var(--font-small);
 --type-heading-leading:1.35;
 --type-card-leading:1.5;
 --type-body-leading:1.65;
}
@media(max-width:767px){:root{--type-section-size:var(--font-heading-sm)}}

/* Central palette: blue foundation with coral and amber split-complement accents. */
:root{
 --color-white:#ffffff;
 --color-black:#000000;
 --color-surface-soft:#f6f8fc;
 --color-surface-blue:#edf4ff;
 --color-border-soft:#dce4ef;
 --color-brand-blue:#3182f6;
 --color-brand-hover:#246bdb;
 --color-blue-ink:#225fba;
 --color-blue-light:#8ec5ff;
 --color-text-strong:#253249;
 --color-text-muted:#5d6b80;
 --color-text-on-dark-muted:#c3d2e6;
 --color-dark-base:#0b0f19;
 --color-dark-hero:#142b4a;
 --color-dark-surface:#182337;
 --color-dark-hover:#23334d;
 --color-dark-border:#3c506d;
 --color-metal-muted:#8494ab;
 --color-accent-coral:#f47c6a;
 --color-accent-amber:#edbe58;
 --color-error-ink:#bc1b2b;
 --color-warning-ink:#845411;
 --color-kakao:#fee500;
 --color-kakao-ink:#241e13;
 --color-kakao-border:#ecd600;
 --color-kakao-hover:#f5dc00;
 --color-surface-overlay:#ffffffed;
 --color-dialog-scrim:#191f2870;
 --color-shadow-faint:#00000010;
 --color-shadow-hairline:#0b0f1903;
 --color-white-soft:#ffffff15;
 --color-shadow-soft:#00000012;
 --color-white-border-strong:#ffffff26;
 --color-shadow-medium:#0003;
 --color-white-tint:#ffffff08;
 --color-white-border:#ffffff20;
 --color-white-hover:#ffffff12;
 --color-white-orbit:#ffffff09;
 --color-shadow-heavy:#0006;
 --color-shadow-deep:#0005;
 --color-shadow-button:#19233414;
 --color-hero-overlay-start:#142b4af5;
 --color-hero-overlay-mid:#142b4ae6;
 --color-hero-overlay-fade:#142b4a70;
 --color-hero-overlay-clear:#142b4a00;
 --color-card-overlay:#151e2be6;
 --color-white-divider:#ffffff18;
 --color-blue-card-overlay:#193d65e8;
 --color-blue-border-overlay:#659fd95c;
 --color-blue-glow:#3182f633;
 --color-white-line:#ffffff1f;
 --primary:var(--color-brand-blue);
 --primary-hover:var(--color-brand-hover);
 --weak:var(--color-surface-blue);
 --surface:var(--color-surface-soft);
 --canvas:var(--color-surface-soft);
 --ink:var(--color-dark-base);
 --body:var(--color-text-strong);
 --muted:var(--color-text-muted);
 --line:var(--color-border-soft);
 --logo-accent:var(--color-brand-blue);
 --bundle-accent:var(--color-accent-amber);
 --logo-tag-bg:var(--color-surface-blue);
 --logo-tag-ink:var(--color-blue-ink);
 --bundle-tag-bg:#fff6df;
 --bundle-tag-ink:#805b0d;
}

/* Neutral inquiry field palette. */
:root{--inquiry-field-bg:#181a1f;--inquiry-field-border:#34373e;--inquiry-field-hover:#52565f;--inquiry-placeholder:#a0a4ae}

/* Service selection surfaces and pointer lighting. */
:root{--service-card-bg:#191c23;--service-card-active:#20242d;--service-glow:#3182f63d;--service-shadow:0 12px 30px #00000026}

/* Advertising variant B: neutral monochrome palette. */
html[data-theme="mono"]{
color-scheme:dark;
--color-surface-soft:#171717;
--color-surface-blue:#222222;
--color-border-soft:#343434;
--color-brand-blue:#f5f5f5;
--color-brand-hover:#d6d6d6;
--color-blue-ink:#ededed;
--color-blue-light:#d0d0d0;
--color-text-strong:#ededed;
--color-text-muted:#ababab;
--color-text-on-dark-muted:#bdbdbd;
--color-dark-base:#080808;
--color-dark-hero:#080808;
--color-dark-surface:#171717;
--color-dark-hover:#242424;
--color-dark-border:#393939;
--color-metal-muted:#969696;
--color-accent-coral:#d0d0d0;
--color-accent-amber:#cccccc;
--color-error-ink:#ffffff;
--color-warning-ink:#d0d0d0;
--color-kakao:#fee500;
--color-kakao-ink:#111111;
--color-kakao-border:#ecd600;
--color-kakao-hover:#f5dc00;
--color-surface-overlay:#101010ed;
--color-blue-glow:#ffffff26;
--color-blue-card-overlay:#181818;
--color-blue-border-overlay:#ffffff26;
--color-hero-overlay-start:#080808f5;
--color-hero-overlay-mid:#080808e6;
--color-hero-overlay-fade:#08080870;
--color-hero-overlay-clear:#08080800;
--color-card-overlay:#151515e6;
--ink:#f5f5f5;
--night:#080808;
--accent-ink:#dedede;
--hero-accent:#ffffff;
--muted-on-dark:#aaaaaa;
--logo-tag-bg:#262626;
--logo-tag-ink:#cccccc;
--bundle-tag-bg:#262626;
--bundle-tag-ink:#cccccc;
--kakao:var(--color-kakao);
--kakao-ink:#111111;
--portfolio-stage-dark:#141414;
--portfolio-stage-light:#222222;
--inquiry-field-bg:#181818;
--inquiry-field-border:#383838;
--inquiry-field-hover:#666666;
--inquiry-placeholder:#a3a3a3;
--service-card-bg:#171717;
--service-card-active:#222222;
--service-glow:#ffffff24;
}