/* ─────────────────────────────────────────────────────────────
   FPCOM — Design Tokens (single source of truth)
   모든 색 · 폰트 · 간격 · 반경 · 그림자 · 모션 · 타입 = 여기서만 관리.
   페이지/컴포넌트는 절대 하드코딩 금지 → var(--fp-*)만 사용.
   ───────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Pretendard:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap");

:root {
  /* ── BRAND PALETTE (FP green + blue) ─────────── */
  --fp-green-30:   #1F5D4E;
  --fp-green-40:   #2F7E68;
  --fp-green-50:   #3FA28A;
  --fp-green-60:   #5BC3A8;
  --fp-green-70:   #7FD9C0;
  --fp-green-80:   #A6E7D2;
  --fp-green-90:   #C9F0E1;

  --fp-blue-30:    #1B4F7A;
  --fp-blue-40:    #2A6FA8;
  --fp-blue-50:    #3D8DCB;
  --fp-blue-60:    #5BA9DE;
  --fp-blue-70:    #7FC0E8;
  --fp-blue-80:    #A6D5F0;
  --fp-blue-90:    #C9E4F4;

  --fp-amber-50:   #E5A33B;
  --fp-amber-60:   #F0C470;
  --fp-red-50:     #E5645B;
  --fp-red-60:     #EF8076;

  /* ── SEMANTIC ROLES ─────────────────────────── */
  --fp-primary:        var(--fp-green-50);
  --fp-primary-hover:  var(--fp-green-60);
  --fp-on-primary:     #06281F;
  --fp-secondary:      var(--fp-blue-50);
  --fp-on-secondary:   #051F30;

  /* ── SURFACES (dark, default) ───────────────── */
  --fp-bg:        #0F1620; /* page bg — 2026-05-07 톤 +1단계 상향 */
  --fp-surface-1: #131D2A; /* card bg low */
  --fp-surface-2: #1A2336; /* card bg mid */
  --fp-surface-3: #222D40; /* elevated */
  --fp-surface-4: #2C3A4F; /* highest */
  --fp-line-1:    #2E3D52; /* hairline */
  --fp-line-2:    #3C4A60; /* divider */

  /* ── TEXT ───────────────────────────────────── */
  --fp-text-1:    #FFFFFF; /* primary — pure white for max legibility */
  --fp-text-2:    #D6DEEB; /* secondary */
  --fp-text-3:    #94A0B4; /* tertiary */
  --fp-text-4:    #5E6A80; /* disabled */

  /* ── STATE TINTS (transparent overlays) ─────── */
  --fp-tint-green-08: color-mix(in oklab, var(--fp-green-50) 8%, transparent);
  --fp-tint-green-14: color-mix(in oklab, var(--fp-green-50) 14%, transparent);
  --fp-tint-green-22: color-mix(in oklab, var(--fp-green-50) 22%, transparent);
  --fp-tint-green-40: color-mix(in oklab, var(--fp-green-50) 40%, transparent);
  --fp-tint-blue-14:  color-mix(in oklab, var(--fp-blue-50) 14%, transparent);
  --fp-tint-blue-22:  color-mix(in oklab, var(--fp-blue-50) 22%, transparent);
  --fp-tint-blue-40:  color-mix(in oklab, var(--fp-blue-50) 40%, transparent);
  --fp-tint-amber-22: color-mix(in oklab, var(--fp-amber-50) 22%, transparent);
  --fp-tint-red-22:   color-mix(in oklab, var(--fp-red-50) 22%, transparent);

  /* ── SPACING (4dp grid) ──────────────────────── */
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 20px;
  --fp-space-6: 24px;
  --fp-space-7: 28px;
  --fp-space-8: 32px;
  --fp-space-10: 40px;
  --fp-space-12: 48px;
  --fp-space-14: 56px;
  --fp-space-16: 64px;
  --fp-space-20: 80px;
  --fp-space-24: 96px;
  --fp-space-32: 128px;

  /* ── RADIUS ──────────────────────────────────── */
  --fp-radius-xs: 4px;
  --fp-radius-sm: 6px;
  --fp-radius-md: 10px;
  --fp-radius-lg: 14px;
  --fp-radius-xl: 18px;
  --fp-radius-2xl: 24px;
  --fp-radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────── */
  --fp-elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.15);
  --fp-elev-2: 0 4px 8px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.15);
  --fp-elev-3: 0 12px 32px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.20);
  --fp-elev-4: 0 24px 48px -12px rgba(0,0,0,.50);

  /* ── TYPE FAMILIES ───────────────────────────── */
  --fp-font-sans: "Pretendard", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fp-font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fp-font-icon: "Material Symbols Outlined";

  /* ── TYPE SCALE ──────────────────────────────── */
  --fp-text-display-lg: 700 72px/1.04 var(--fp-font-sans);
  --fp-text-display-md: 700 56px/1.05 var(--fp-font-sans);
  --fp-text-display-sm: 700 44px/1.08 var(--fp-font-sans);
  --fp-text-h1:         600 40px/1.10 var(--fp-font-sans);
  --fp-text-h2:         600 32px/1.15 var(--fp-font-sans);
  --fp-text-h3:         600 24px/1.25 var(--fp-font-sans);
  --fp-text-h4:         600 18px/1.35 var(--fp-font-sans);
  --fp-text-body-lg:    400 17px/1.6  var(--fp-font-sans);
  --fp-text-body:       400 15px/1.6  var(--fp-font-sans);
  --fp-text-body-sm:    400 13px/1.55 var(--fp-font-sans);
  --fp-text-caption:    500 12px/1.4  var(--fp-font-sans);
  --fp-text-mono:       500 12px/1.5  var(--fp-font-mono);
  --fp-text-mono-sm:    500 11px/1.5  var(--fp-font-mono);

  /* ── MOTION ──────────────────────────────────── */
  --fp-easing:        cubic-bezier(0.2, 0, 0, 1);
  --fp-easing-decel:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --fp-dur-1: 120ms;
  --fp-dur-2: 200ms;
  --fp-dur-3: 320ms;

  /* ── LAYOUT ──────────────────────────────────── */
  --fp-container-max: 1280px;
  --fp-container-pad: var(--fp-space-8);
  --fp-nav-h: 64px;

  /* ── VISUAL POLISH (보정 2026-05-07) ────────────
     강도 조절: 아래 변수 값만 바꾸면 됨.
     --fp-nav-bg-alpha   : nav 배경 밝기 오버레이 (0 = 없음, 높을수록 밝아짐)
     --fp-nav-border-alpha: nav 하단 라인 강도   (0 = 없음, 0.12 권장)
     --fp-bg-grid-alpha  : 페이지 바탕 도트 강도 (0 = 없음, 0.04 권장)
     --fp-bg-glow-alpha  : 우상단 accent 글로우  (0 = 없음, 0.08 권장)
  ──────────────────────────────────────────────── */
  --fp-nav-bg-alpha:    0.06;
  --fp-nav-border-alpha: 0.18;
  --fp-bg-grid-alpha:   0.08;
  --fp-bg-glow-alpha:   0.14;
}