:root {
  /* Color -- brand */
  --color-black: #111111;
  --color-white: #ffffff;
  --color-ink: #111111;
  --color-ink-strong: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  --color-surface-soft: #f5f5f5;
  --color-surface-story: #f8fafc;
  --color-surface-goods: #f3f4f6;

  --color-brand-title: #874e14;
  --color-brand-tagline: #ceb290;
  --color-brand-gradient-start: #e4ccad;
  --color-brand-gradient-end: #c79968;

  --color-footer-bg: #111827;
  --color-footer-muted: #9ca3af;

  /* Typography */
  --font-primary: "Pretendard", "SUIT", "Noto Sans KR", -apple-system, sans-serif;
  --font-display: "Cafe24Syongsyong", "Jua", var(--font-primary);

  --fs-hero-title: 128px;
  --fs-hero-tagline: 36px;
  --fs-section-title: 64px;
  --fs-display: 48px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-body: 16px;
  --fs-caption: 14px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;
  --space-11: 160px;

  /* Layout */
  /* Figma frame is 1440px wide (120px margin + 1200px content + 120px
     margin). .container has box-sizing:border-box, so max-width has to be
     the full 1440px frame width -- 1200px would leave only 960px of actual
     content once the 120px page-padding on each side is subtracted. */
  --content-max-width: 1440px;
  --page-padding: var(--space-10);
  --section-gap: var(--space-9);
  /* Extra margin BETWEEN top-level sections, on top of each section's own
     --section-gap padding -- measured from Figma's absolute Y coordinates
     (Hero/About/Emoticon/Story/Goods/Footer are each exactly 114px further
     apart than their own padding accounts for). Scaled at the same ratio
     as --section-gap's own breakpoint values below. */
  --section-margin: 114px;

  /* Motion durations */
  --duration-micro: 0.25s;
  --duration-ui: 0.5s;
  --duration-character: 0.8s;
  --duration-landing: 2s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (max-width: 1024px) {
  :root {
    --page-padding: var(--space-6);
    --section-gap: var(--space-8);
    --section-margin: 91px;
    --fs-hero-title: 88px;
    --fs-hero-tagline: 25px;
    --fs-section-title: 44px;
    --fs-display: 34px;
  }
}

@media (max-width: 599px) {
  :root {
    --page-padding: var(--space-4);
    --section-gap: var(--space-7);
    --section-margin: 68px;
    --fs-hero-title: 52px;
    --fs-hero-tagline: 17px;
    --fs-section-title: 32px;
    --fs-display: 26px;
    --fs-h1: 24px;
    --fs-h2: 20px;
  }
}