/* BUILDUP Team App — 디자인 토큰 v1 (2026-10-28). tokens.json에서 만든 파일이라 값은 tokens.json에서 고칩니다. */
/* 쓰는 법: 다른 CSS보다 먼저 불러오세요. <link rel="stylesheet" href="/buildup-tokens.css"> */

@font-face { font-family: Paperlogy; src: url('/assets/fonts/buildup/paperlogy/Paperlogy-4Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Paperlogy; src: url('/assets/fonts/buildup/paperlogy/Paperlogy-5Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Paperlogy; src: url('/assets/fonts/buildup/paperlogy/Paperlogy-6SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Paperlogy; src: url('/assets/fonts/buildup/paperlogy/Paperlogy-7Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Paperlogy; src: url('/assets/fonts/buildup/paperlogy/Paperlogy-8ExtraBold.woff2') format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; }

/* 색 · 그림자: 밝은 테마(기본) */
:root, [data-theme="light"] {
  --bg: #f4f3ef;
  --surface: #ffffff;
  --surface-muted: #ecebe6;
  --surface-deep: #15342b;
  --line: #dce3da;
  --line-strong: #7f8e86;
  --scrim: #1f2d2766;
  --ink: #1f2d27;
  --ink-secondary: #4f6058;
  --ink-tertiary: #5c6c64;
  --ink-on-deep: #ffffff;
  --ink-on-deep-muted: #c9d6cf;
  --brand: #234b3e;
  --brand-hover: #1a3b31;
  --on-brand: #ffffff;
  --brand-soft: #e3eee5;
  --lime: #b9f45a;
  --on-lime: #1f2d27;
  --lime-soft: #e6f5cc;
  --ai: #136b60;
  --on-ai: #ffffff;
  --ai-soft: #e0f1ee;
  --success: #23704a;
  --success-soft: #e3f2e8;
  --warning: #8a4a00;
  --warning-soft: #fbeedb;
  --danger: #b42f24;
  --on-danger: #ffffff;
  --danger-soft: #fbe8e5;
  --info: #2a5f6d;
  --info-soft: #e2eef0;
  --focus: #2f7d5c;
  --shadow-sm: 0 1px 2px #1f2d270f;
  --shadow-md: 0 4px 12px #1f2d2714;
  --shadow-lg: 0 12px 36px #1f2d2724;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #2f7d5c;
}

/* Effective theme; the system preference is resolved by buildup-preferences.js. */
[data-theme="dark"] {
  --bg: #121a17;
  --surface: #1a2420;
  --surface-muted: #222e29;
  --surface-deep: #1b3f34;
  --line: #2e3b35;
  --line-strong: #6b7a72;
  --scrim: #000000a6;
  --ink: #ecf1ee;
  --ink-secondary: #b4c1ba;
  --ink-tertiary: #9aa8a1;
  --ink-on-deep: #ecf1ee;
  --ink-on-deep-muted: #b4c1ba;
  --brand: #7cc6a3;
  --brand-hover: #9ad6b9;
  --on-brand: #0e241e;
  --brand-soft: #1f3a31;
  --lime: #b9f45a;
  --on-lime: #1f2d27;
  --lime-soft: #2c3a1a;
  --ai: #5cc4b4;
  --on-ai: #08201c;
  --ai-soft: #13302c;
  --success: #6fcf97;
  --success-soft: #163324;
  --warning: #f2b866;
  --warning-soft: #3a2a12;
  --danger: #ff8a7e;
  --on-danger: #2a0d0a;
  --danger-soft: #3d1a17;
  --info: #7fc3d4;
  --info-soft: #15303a;
  --focus: #8fd0b0;
  --shadow-sm: 0 1px 2px #00000066;
  --shadow-md: 0 4px 12px #00000080;
  --shadow-lg: 0 12px 36px #000000a6;
  --focus-ring: 0 0 0 2px #121a17, 0 0 0 4px #8fd0b0;
}

:root {
  /* spacing */
  --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;
  /* radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  /* size */
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --tabbar-height: 64px;
  --fab-size: 56px;
  --content-max: 1120px;
  /* breakpoint */
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  /* zIndex */
  --z-sticky: 20;
  --z-tabbar: 40;
  --z-fab: 50;
  --z-sheet: 60;
  --z-toast: 70;
  --font-sans: Paperlogy, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

/* 글자 스타일 클래스 */
.t-display { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; }
.t-page-title { font-family: var(--font-sans); font-size: 26px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
.t-section-title { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 700; }
.t-card-title { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; }
.t-body { font-family: var(--font-sans); font-size: 15px; line-height: 24px; font-weight: 400; }
.t-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.t-caption { font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 500; }
.t-overline { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.04em; }
.t-stat { font-family: var(--font-sans); font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-jersey { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 기본 */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); word-break: keep-all; overflow-wrap: anywhere; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 옛 변수 이어 두기: 지금 화면 CSS(--ws-*)가 새 값을 바로 쓰게 함. 화면을 고칠 때마다 새 이름으로 바꾸고, 다 바뀌면 이 블록을 지웁니다. */
:root {
  --ws-bg: var(--bg);
  --ws-surface: var(--surface);
  --ws-muted-surface: var(--surface-muted);
  --ws-soft: var(--brand-soft);
  --ws-border: var(--line);
  --ws-ink: var(--ink);
  --ws-muted: var(--ink-secondary);
  --ws-dark: var(--surface-deep);
  --ws-accent: var(--lime);
  --ws-blue: var(--info);
  --ws-danger: var(--danger);
  --ws-radius: var(--radius-md);
  --ws-shadow: var(--shadow-lg);
}

/* App migration additions, UX-01: named dimensions and type values. */
:root { --text-caption:12px; --text-sm:14px; --text-body:15px; --text-title:26px; --leading-body:24px; --stroke:1px; --sidebar-width:240px; --icon-md:20px; --safe-content-bottom:136px; --skeleton-height:96px; --dialog-max:680px; --avatar-size:36px; }