/* AboutFishing Design System — Core Tokens
 * Source: Figma /METADATA.md, /page/style-guide, /external-shared/TypeBlackEnabledTrue2 etc.
 * Primary font: Pretendard. Base viewport: 393px (iPhone 14 Pro / Figma canvas width).
 */

/* Brand font — user-uploaded variable file.
 * One woff2-variations file serves the whole 45–920 weight range;
 * we alias it to both the Variable and static family names so any
 * existing font-family: "Pretendard" reference still resolves. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/PretendardVariable.woff2") format("woff2-variations"),
       url("fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand — primary CTA blue (from Figma: rgb(0,65,255) — 2551 uses) */
  --af-blue: #32008C;
  --af-blue-press: #25006A;
  --af-blue-bg: #F9F7FF;     /* badge bg for blue category tag */
  --af-blue-bg-2: #F2F5FA;   /* soft chat bubble */

  /* ── Foreground / neutrals (from METADATA top colors) */
  --fg-1: #191919;           /* strongest text, primary labels (25,25,25) */
  --fg-2: #363636;           /* default body text (54,54,54) — dominant */
  --fg-3: #767676;           /* secondary text (118,118,118) */
  --fg-4: #999999;           /* tertiary / placeholder (153,153,153) */
  --fg-5: #AAAAAA;           /* muted (170,170,170) */
  --fg-disabled: #CCCCCC;    /* disabled labels (204,204,204) */

  /* ── Background / surfaces */
  --bg: #FFFFFF;
  --surface-1: #F8F8F8;      /* card alt (248,248,248) */
  --surface-2: #F3F3F3;      /* image placeholder (243,243,243) */
  --surface-3: #EEEEEE;      /* divider/outline fill (238,238,238) */
  --surface-cool: #F5F7FA;   /* (245,247,250) */
  --surface-cool-2: #F2F5FA; /* outgoing chat bubble */

  /* ── Border */
  --border-1: #EEEEEE;       /* hairline (238,238,238) */
  --border-2: #E0E0E0;       /* control border (224,224,224) */
  --border-3: #E1E8F1;       /* cool border (225,232,241) */

  /* ── Semantic */
  --red:    #EE0005;         /* error / alert (238,0,5) */
  --red-2:  #FF0000;         /* emphasis red */
  --red-3:  #FF3C3A;         /* warning text */
  --orange: #FF4C14;         /* highlight orange / badge fill (255,76,20) */
  --orange-soft: #FFA77B;    /* decorative orange */
  --yellow: #FFD91E;         /* accent yellow */
  --green:  #245C45;         /* dark teal from palette */
  --green-lime: #B9E100;     /* 실명인증 verify badge */
  --purple: #6433DF;         /* AI 인증가 tag bg */

  /* ── Corner-ribbon palette (top-left 45° tag on cards) */
  --ribbon-purple: #6433DF;   /* 대회 / 챔피언십 */
  --ribbon-yellow: #FFD91E;   /* new / sale on 쇼핑 */
  --ribbon-lime:   #B9E100;   /* 최저가 */
  --ribbon-sky:    #3B9CFF;   /* 보유 on 중고장터 */
  --ribbon-cyan:   #0AD2FF;   /* 실시간 on 예약 */

  /* ── Money (어바웃피싱 머니) */
  --money-coin: #FFC700;      /* yellow M coin */
  --money-num:  #0041FF;      /* money numerals always blue */

  /* ── Illustration card tints (3D-character hero cards) */
  --tint-blue:   #EAF0FF;
  --tint-lavender:#F5EDFF;
  --tint-mint:   #E8FBEE;
  --tint-peach:  #FFF1E8;

  /* ── Radius (from Figma tokens) */
  --radius-xs: 4px;   /* small badges */
  --radius-sm: 5px;   /* style-guide frames */
  --radius-md: 8px;   /* inputs, small buttons */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 18px;  /* chat bubbles, large cards */
  --radius-2xl: 22px; /* modal popups */
  --radius-pill: 1000px; /* pill buttons */

  /* ── Spacing (mobile 393 column) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --gutter: 18px;        /* default horizontal gutter on 393px canvas */

  /* ── Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(25,25,25,0.12);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.35);

  /* ── Type */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
    "Apple SD Gothic Neo", "Noto Sans KR", "Spoqa Han Sans Neo", sans-serif;
  --letter-tight: -0.4px;    /* default Korean tracking in file */
}

/* ── Semantic type scale
 * Mobile (393px) — derived from Figma frequency:
 *   body 15px Medium (top usage), 14/13px secondary, 11.5px micro
 *   heading 28px/22-23px ExtraBold for modal titles and section heads
 */
html, body { font-family: var(--font-sans); color: var(--fg-2); }

.af-display-l { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: var(--letter-tight); color: var(--fg-2); }
.af-display-m { font-size: 23px; font-weight: 800; line-height: 1.2;  letter-spacing: var(--letter-tight); color: var(--fg-2); }
.af-display-s { font-size: 20px; font-weight: 700; line-height: 1.2;  letter-spacing: var(--letter-tight); color: var(--fg-2); }

.af-h1 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--fg-2); letter-spacing: var(--letter-tight); }
.af-h2 { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--fg-2); letter-spacing: var(--letter-tight); }
.af-h3 { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--fg-2); letter-spacing: var(--letter-tight); }

.af-body-l   { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--fg-2); }
.af-body     { font-size: 15px; font-weight: 500; line-height: 1.5;  color: var(--fg-2); }  /* dominant */
.af-body-sm  { font-size: 14px; font-weight: 500; line-height: 1.5;  color: var(--fg-3); }
.af-caption  { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--fg-3); }
.af-micro    { font-size: 11.5px; font-weight: 500; line-height: 15px; color: var(--fg-3); }
.af-tag      { font-size: 11px; font-weight: 700; line-height: 1.4;  letter-spacing: var(--letter-tight); }
.af-tag-xs   { font-size: 10px; font-weight: 700; line-height: 11px; }

a, button { font-family: inherit; }