/* =============================================================
 * Design Tokens — extracted from Figma (file N2H7jFeGG09XXQJFtzNIxw, node 33:1045)
 * Source of truth: Figma Variables (see docs/components.md)
 * Edit Figma first, then re-extract; do not hand-tune values here without updating both.
 * ============================================================= */

:root {
  /* ----- Font family ----- */
  --font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, sans-serif;

  /* ----- Brand color ----- */
  --color-primary: #ff8b00;
  --color-primary-25:  #fffaf5;
  --color-primary-50:  #fff4e0;
  --color-primary-100: #ffe5c2;
  --color-primary-400: #ffa026;
  --color-primary-500: #ff8b00;
  --color-primary-600: #d26900;
  --color-primary-700: #ad5200;
  --color-primary-800: #843d00;

  --color-brand-mint: #36d4ca;
  --color-brand-pink: #fe5f8e;
  --color-brand-purple: #bc74c2;
  --color-secondary-50: #edfafd;

  /* ----- Gray scale ----- */
  --color-gray-25: #fdfdfd;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e9eaeb;
  --color-gray-300: #d5d7da;
  --color-gray-400: #a4a7ae;
  --color-gray-500: #717680;
  --color-gray-600: #535862;
  --color-gray-700: #414651;
  --color-gray-800: #252b37;
  --color-gray-900: #0a0d12;
  --color-white: #ffffff;

  /* ----- Alpha ----- */
  --color-white-a80: #ffffffcc;

  /* ----- Surface / Border ----- */
  --color-bg: #ffffff;
  --color-surface: #f8f8f8;
  --color-border: #e0e0e0;
  --color-border-strong: #d5d7da;

  /* ----- Status ----- */
  --color-error: #f04343;

  /* ----- Typography: Display (Hero / large) ----- */
  --font-d1: 700 40px/1.4 var(--font-family);
  --font-d2: 700 32px/1.4 var(--font-family);
  --font-d3: 700 48px/1.4 var(--font-family);

  /* ----- Typography: Heading ----- */
  --font-h1: 700 28px/1.4 var(--font-family);
  --font-h2: 700 24px/1.4 var(--font-family);
  --font-h3: 700 20px/1.4 var(--font-family);
  --font-h4: 700 18px/1.4 var(--font-family);

  /* ----- Typography: Body ----- */
  --font-body1-sb: 600 18px/1.4 var(--font-family);
  --font-body1-md: 500 18px/1.4 var(--font-family);
  --font-body2-sb: 600 16px/1.5 var(--font-family);
  --font-body2-md: 500 16px/1.5 var(--font-family);
  --font-body3-sb: 600 14px/1.5 var(--font-family);
  --font-body3-md: 500 14px/1.5 var(--font-family);
  --font-body3-r:  400 14px/1.5 var(--font-family);

  /* ----- Typography: Caption ----- */
  --font-caption1: 500 12px/1.5 var(--font-family);
  --font-caption2: 400 11px/1.5 var(--font-family);
  --font-caption3: 600 12px/1.5 var(--font-family);

  /* ----- Typography: Label ----- */
  --font-label1: 600 14px/1.4 var(--font-family);
  --font-label2: 600 12px/1.4 var(--font-family);

  /* ----- Typography: Button ----- */
  --font-btn-xl:        400 18px/1.4 var(--font-family);
  --font-btn-xl-active: 600 18px/1.4 var(--font-family);
  --font-btn-l:         500 16px/1.4 var(--font-family);
  --font-btn-l-active:  600 16px/1.4 var(--font-family);
  --font-btn-m:         500 14px/1.4 var(--font-family);
  --font-btn-m-active:  600 14px/1.4 var(--font-family);
  --font-btn-s:         500 12px/1.4 var(--font-family);
  --font-btn-s-active:  600 12px/1.4 var(--font-family);

  /* ----- Spacing (8px grid; provisional, adjust against Figma in P3) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ----- Radius (provisional) ----- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ----- Shadow (provisional) ----- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);

  /* ----- Layout (Figma Header is 1920 wide; content width TBD in P3) ----- */
  --container-app:  1920px;
  --container-page: 1440px;
  --container-text: 1200px;

  /* ----- Z-index ----- */
  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    1000;
  --z-toast:    1100;
}

/* ----- Mobile type scale: shrink fonts overall on small screens ----- */
@media (max-width: 720px) {
  :root {
    --font-d1: 700 30px/1.35 var(--font-family);
    --font-d2: 700 25px/1.35 var(--font-family);
    --font-d3: 700 34px/1.35 var(--font-family);

    --font-h1: 700 22px/1.35 var(--font-family);
    --font-h2: 700 19px/1.4 var(--font-family);
    --font-h3: 700 17px/1.4 var(--font-family);
    --font-h4: 700 16px/1.4 var(--font-family);

    --font-body1-sb: 600 16px/1.45 var(--font-family);
    --font-body1-md: 500 16px/1.45 var(--font-family);
    --font-body2-sb: 600 15px/1.5 var(--font-family);
    --font-body2-md: 500 15px/1.5 var(--font-family);
    --font-body3-sb: 600 13px/1.5 var(--font-family);
    --font-body3-md: 500 13px/1.5 var(--font-family);
    --font-body3-r:  400 13px/1.5 var(--font-family);

    --font-caption1: 500 11px/1.5 var(--font-family);
    --font-caption3: 600 11px/1.4 var(--font-family);
    --font-label1: 600 13px/1.4 var(--font-family);

    --font-btn-xl:        400 16px/1.4 var(--font-family);
    --font-btn-xl-active: 600 16px/1.4 var(--font-family);
    --font-btn-l:         500 15px/1.4 var(--font-family);
    --font-btn-l-active:  600 15px/1.4 var(--font-family);
  }
}