/* ============================================================
   BlueP Design System — Color & Type Tokens
   Source: BLUEP/BlueP Design Nationale (Figma)
   ============================================================ */

/* Pretendard Variable — primary brand face (Korean + Latin) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");

:root {
  /* ---------- Brand & Primary ---------- */
  --bluep-blue:        rgb(59, 98, 246);     /* Primary / Money Blue — actions, focus, brand */
  --bluep-blue-dark:   rgb(51, 75, 196);     /* pressed / deep brand */
  --bluep-blue-bright: rgb(64, 104, 255);    /* link/active variant */
  --bluep-blue-soft:   rgb(141, 164, 239);   /* mid-tone supporting */
  --bluep-blue-tint:   rgb(199, 211, 255);   /* SubColor — soft chip / track */
  --bluep-blue-pale:   rgb(232, 240, 254);   /* hover / selected surface */

  /* ---------- Text (foreground) ---------- */
  --fg-1:              rgb(17, 24, 39);      /* Text / Black — primary copy */
  --fg-2:              rgb(55, 65, 81);      /* strong-secondary */
  --fg-3:              rgb(107, 114, 128);   /* SubText / MoneyGray — secondary copy */
  --fg-4:              rgb(148, 163, 184);   /* helper / muted */
  --fg-5:              rgb(100, 116, 139);   /* alt slate */
  --fg-deep:           rgb(29, 53, 87);      /* deep navy accent text */

  /* ---------- Surfaces & Backgrounds ---------- */
  --surface-real-white: rgb(255, 255, 255);  /* CardSurface / RealWhite */
  --surface-card:       rgb(253, 254, 254);  /* card-on-bg, micro tint */
  --surface-bg:         rgb(244, 246, 250);  /* BackgroundSurface / MoneyLightgray — page bg */
  --surface-bg-2:       rgb(249, 250, 251);  /* alt page bg */
  --surface-pressed:    rgb(252, 252, 252);

  /* ---------- Borders / Dividers ---------- */
  --border-1:          rgb(217, 217, 217);
  --border-2:          rgb(192, 192, 192);
  --border-3:          rgb(178, 178, 178);
  --hairline:          rgb(107, 114, 128);   /* 1px field underline */

  /* ---------- Semantic — Status ---------- */
  --warning-orange:    rgb(241, 74, 48);     /* Warning Orange/Red — shortfall, over-cap */
  --warning-soft:      rgb(252, 232, 230);   /* warning chip bg */
  --success-green:     rgb(73, 156, 60);
  --success-soft:      rgb(116, 196, 101);

  /* ---------- Category / Asset Type Colors ---------- */
  --cat-savings:    var(--bluep-blue);       /* 저축 — Savings */
  --cat-invest:     var(--bluep-blue-soft);  /* 투자 — Invest */
  --cat-tangible:   var(--fg-deep);          /* 실물자산 — Tangible asset */
  --cat-debt:       var(--warning-orange);   /* 빚 — Debt */

  /* ---------- Shadows / Elevation ---------- */
  --shadow-card:    0 4px 16px 0 rgba(26, 43, 80, 0.08);
  --shadow-card-lg: 0 9px 18px 0 rgba(26, 43, 80, 0.08);
  --shadow-chip:    1px 1px 3.5px 0 rgba(90, 90, 90, 0.20);
  --shadow-chip-sm: 0 0 4px 0 rgba(90, 90, 90, 0.08);
  --shadow-popup:   0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --shadow-frame:   inset 16.81px 3.36px 53.79px 15.13px rgb(255,255,255), 0 4px 16px 0 rgba(26, 43, 80, 0.08);

  /* ---------- Radii ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  10px;   /* buttons, inputs (Figma default = 10) */
  --radius-lg:  16px;   /* cards on tablet/desktop scale */
  --radius-xl:  24px;
  --radius-2xl: 34px;   /* card content rounding */
  --radius-3xl: 46px;   /* main asset card rounding */
  --radius-pill: 9999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Typography ---------- */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
               BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR",
               system-ui, sans-serif;
  --font-numeric: "Pretendard Variable", "Inter", system-ui, sans-serif;

  /* Roles (defined by the Design Nationale doc) */
  --type-hero-size: 28px; --type-hero-weight: 800;   /* 웰컴 */
  --type-page-title-size: 24px; --type-page-title-weight: 800;
  --type-summary-size: 28px; --type-summary-weight: 700;   /* 금액/수치 */
  --type-card-title-size: 18px; --type-card-title-weight: 700;
  --type-body-size: 14px; --type-body-weight: 600;
  --type-helper-size: 12px; --type-helper-weight: 500;
  --type-warning-size: 14px; --type-warning-weight: 700;
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Type Roles (semantic helpers) ---------- */
.t-hero       { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--fg-1); }
.t-page-title { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--fg-1); }
.t-title-1    { font-size: 28px; font-weight: 800; line-height: 1.0; color: var(--fg-1); }
.t-body-1     { font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--fg-1); }
.t-body-2     { font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--fg-1); }
.t-body-3     { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--fg-1); }
.t-title-2    { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--fg-1); }
.t-title-2-thin { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--fg-1); }
.t-title-3    { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fg-1); }
.t-body-4     { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--fg-3); }

.t-summary    { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-1); font-feature-settings: "tnum"; }
.t-helper     { font-size: 12px; font-weight: 500; color: var(--fg-3); }
.t-warning    { font-size: 14px; font-weight: 700; color: var(--warning-orange); }

/* ---------- Element defaults ---------- */
h1 { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
h2 { font-size: 24px; font-weight: 800; line-height: 1.15; color: var(--fg-1); margin: 0; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.2;  color: var(--fg-1); margin: 0; }
h4 { font-size: 16px; font-weight: 700; line-height: 1.3;  color: var(--fg-1); margin: 0; }
p  { font-size: 14px; font-weight: 500; line-height: 1.5;  color: var(--fg-2); margin: 0; }
small { font-size: 12px; font-weight: 500; color: var(--fg-3); }
code  { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--fg-1); background: var(--surface-bg); padding: 2px 6px; border-radius: 4px; }