/* * Basketball / ReadyToPlay Design System — Tokens * 통합 디자인 토큰. main.css / player.css / rtp-tokens.css 의 분산 변수를 통합. * * ⭐ 2026-07-02: claude.ai/design "RtP Design System" 정본과 1회 정렬. * - BRAND PRIMARY = ORANGE (#FF6B35). 파랑은 accent(보조)·데이터/링크로 강등 (정본 명시). * - status/easing 등 값 충돌은 정본 기준으로 통일. * - neutral scale / type 조합 토큰 / tracking / focus-ring 등 정본 자산 채움(③). * - 값 맞추기 기준·재사용 규칙은 docs/conventions/frontend.md "Design Tokens" 참고. * * 사용: var(--bb-primary), var(--bb-tap-target) 등 */ :root { /* ───────── Color — brand PRIMARY = Orange (정본: color-brand-*) ───────── */ --bb-primary: #FF6B35; /* 브랜드 primary (Nike/RtP 오렌지) */ --bb-primary-dark: #D94E1F; /* 정본 orange-strong */ --bb-primary-heavy: #B8401A; /* 정본 orange-heavy (신규) */ --bb-primary-soft: #FFEEE6; /* 정본 orange-soft */ --bb-primary-tint: #FFF5F0; /* 정본 orange-tint (신규) */ /* ───────── Color — accent = Blue (정본: color-accent-*, 데이터/링크/info) ───────── */ --bb-accent: #0064FF; /* 정본 blue (기존 #3182F6 → #0064FF 통일) */ --bb-accent-dark: #0052D4; /* 정본 blue-strong */ --bb-accent-heavy: #003FA8; /* 정본 blue-heavy (신규) */ --bb-accent-soft: #EAF2FE; /* 정본 blue-soft */ --bb-accent-tint: #F4F8FF; /* 정본 blue-tint (신규) */ /* 하위호환 별칭: 과거 --bb-primary(파랑)를 명시적으로 쓰던 데이터/링크용 */ --bb-primary-blue: var(--bb-accent); --bb-primary-blue-dark: var(--bb-accent-dark); --bb-primary-blue-soft: var(--bb-accent-soft); /* ───────── Color — text ───────── */ --bb-ink: #191F28; --bb-ink-sub: #6B7280; --bb-ink-muted: #9CA3AF; /* ───────── Color — surface ───────── */ --bb-bg: #FFFFFF; --bb-surface: #F9FAFB; --bb-border: #E5E8EB; --bb-border-soft: #EEF0F2; /* ───────── Color — hero (RTP dark theme) ───────── */ --bb-hero-dark: #15171C; --bb-hero-inner: #1C1F25; /* ───────── Neutral scale (정본 --neutral-*, 신규 ③) ───────── */ --bb-neutral-0: #FFFFFF; --bb-neutral-50: #F7F7F8; --bb-neutral-100: #F4F4F5; --bb-neutral-200: #DBDCDF; --bb-neutral-300: #C2C4C8; --bb-neutral-400: #AEB0B6; --bb-neutral-500: #989BA2; --bb-neutral-600: #70737C; --bb-neutral-700: #46474C; --bb-neutral-800: #2E2F33; --bb-neutral-900: #171719; --bb-neutral-950: #0A0A0B; /* ───────── Color — semantic status (정본 값으로 통일) ───────── */ --bb-success: #00BF40; /* 정본 status-positive (기존 #22C55E) */ --bb-success-soft: #D1FAE5; --bb-warning: #FAA800; /* 정본 status-warning (기존 #F59E0B) */ --bb-warning-soft: #FEF3C7; --bb-danger: #FF4242; /* 정본 status-negative (기존 #EF4444) */ --bb-danger-soft: #FEE2E2; --bb-info: #0066FF; /* 정본 status-info (신규 ③) */ --bb-info-soft: #EAF2FE; /* ───────── Spacing (4px scale) ───────── */ --bb-space-05: 2px; /* 정본 --space-2 (신규 ③) */ --bb-space-1: 4px; --bb-space-15: 12px; /* 정본 --space-12 (신규 ③) */ --bb-space-2: 8px; --bb-space-25: 20px; /* 정본 --space-20 (신규 ③) */ --bb-space-3: 16px; --bb-space-4: 24px; --bb-space-5: 32px; --bb-space-6: 48px; /* 정본 --space-48 (신규 ③) */ --bb-space-7: 64px; /* 정본 --space-64 (신규 ③) */ --bb-space-8: 96px; /* 정본 --space-96 (신규 ③) */ --bb-space-9: 128px; /* 정본 --space-128 (신규 ③) */ /* ───────── Typography — families ───────── */ --bb-font: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif; --bb-font-num: 'Barlow', 'Pretendard Variable', 'Pretendard', system-ui, sans-serif; --bb-text-sm: 14px; --bb-text-base: 16px; --bb-text-lg: 18px; --bb-text-xl: 20px; /* ───────── Typography — 조합 토큰 (정본 --type-*, 신규 ③) ───────── */ --bb-type-display-l: 700 56px/1.10 var(--bb-font); --bb-type-display-m: 700 40px/1.15 var(--bb-font); --bb-type-h1: 700 36px/1.334 var(--bb-font); --bb-type-h2: 700 28px/1.358 var(--bb-font); --bb-type-h3: 700 24px/1.334 var(--bb-font); --bb-type-h4: 700 20px/1.4 var(--bb-font); --bb-type-h5: 700 17px/1.412 var(--bb-font); --bb-type-body-lg: 500 17px/1.5 var(--bb-font); --bb-type-body: 500 16px/1.5 var(--bb-font); --bb-type-body-sm: 500 14px/1.5 var(--bb-font); --bb-type-caption: 500 13px/1.5 var(--bb-font); --bb-type-button: 600 16px/1.25 var(--bb-font); /* Tracking (정본 --tracking-*, 신규 ③) */ --bb-tracking-h1: -0.027em; --bb-tracking-h2: -0.024em; --bb-tracking-h3: -0.023em; --bb-tracking-h4: -0.012em; --bb-tracking-body: 0.006em; /* ───────── Radius (실제 사용 빈도순 + 정본 스케일 채움) ───────── */ --bb-radius-sm: 6px; /* 로컬 비표준 유지 (컴포넌트 회귀 방지) */ --bb-radius: 12px; /* = 정본 --radius-4 */ --bb-radius-lg: 14px; /* 로컬 비표준 유지 */ --bb-radius-xl: 16px; /* = 정본 --radius-5 */ --bb-radius-pill: 999px; --bb-radius-4: 4px; /* 정본 --radius-2 (신규 ③) */ --bb-radius-8: 8px; /* 정본 --radius-3 (신규 ③) */ --bb-radius-20: 20px; /* 정본 --radius-6 (신규 ③) */ --bb-radius-32: 32px; /* 정본 --radius-7 (신규 ③) */ --bb-radius-64: 64px; /* 정본 --radius-8 (신규 ③) */ /* ───────── Shadow / Elevation ───────── */ --bb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --bb-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); --bb-shadow-md: 0 6px 16px rgba(255, 107, 53, 0.24); /* 오렌지 틴트 CTA */ --bb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --bb-focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.32); /* 정본 focus-ring, 오렌지 (신규 ③) */ /* ───────── Touch target (모바일 접근성) ───────── */ --bb-tap-target: 44px; /* ───────── Motion (정본 easing 곡선으로 통일) ───────── */ --bb-ease: cubic-bezier(0.2, 0, 0, 1); /* 정본 (기존 0.4,0,0.2,1) */ --bb-t-fast: 120ms; --bb-t-base: 200ms; --bb-t-slow: 320ms; --bb-t-graph: 600ms; /* 신규 — 상세 그래프 채우기 애니메이션(stat_detail_ux R2) */ --bb-t-spin: 800ms; /* 신규 — 진입 로딩 스피너 1회전(stat_detail_ux R1) */ /* ───────── Overlay (신규 — stat_detail_ux R1 진입 로딩) ───────── */ --bb-overlay-dark: rgba(25, 31, 40, 0.55); /* --bb-ink 틴트, 전체화면 딤 오버레이용 */ }