/* * Stripe 디자인 토큰 * * 출처: Stripe Dashboard 일반 지식 기반 (stripe.com 직접 inspect는 차단) * 컨셉: 결제 데이터 표현의 기준 — pale blue-tinted gray + deep navy text + Stripe 보라 * * 활성화: */ [data-brand="stripe"], .brand-stripe { /* Surface — 살짝 푸른 톤 */ --surface-0: #ffffff; --surface-1: #f6f9fc; /* Stripe signature pale blue-gray */ --surface-2: #e3e8ee; --surface-3: #c1c9d2; --surface-hover: #eff3f8; --surface-active: #e3e8ee; --border-subtle: #e3e8ee; /* Text */ --text-primary: #0a2540; /* Stripe deep navy */ --text-secondary: #425466; --text-tertiary: #697386; --text-inverse: #ffffff; /* Brand */ --primary: #0a2540; --primary-hover: #061a30; --brand-accent: #635bff; /* Stripe purple/indigo */ --cta: #635bff; --cta-hover: #5147e0; /* Status */ --destructive: #df1b41; --destructive-light: #fde6ec; --destructive-dark: #b1162f; --destructive-border: #f7b9c9; --status-success: #00d924; --status-success-light: #d0f7d8; --status-success-dark: #00a51c; --status-success-border: #9be3a8; --status-warning: #ff9b41; --status-warning-light: #fff0db; --status-warning-dark: #d97a1f; --status-warning-border: #ffd1a3; --status-info: #635bff; --status-info-light: #ece9ff; --status-info-dark: #5147e0; --status-info-border: #c8c2ff; /* Radius — Stripe는 매우 tight */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; /* Shadow — Stripe specific blue-tinted depth */ --shadow-subtle: 0 1px 3px rgba(50, 50, 93, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-card: 0 2px 5px rgba(50, 50, 93, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 7px 14px rgba(50, 50, 93, 0.10), 0 3px 6px rgba(0, 0, 0, 0.08); --shadow-elevated: 0 13px 27px -5px rgba(50, 50, 93, 0.18), 0 8px 16px -8px rgba(0, 0, 0, 0.16); --shadow-overlay: 0 16px 48px -8px rgba(50, 50, 93, 0.22); --shadow-toast: 0 12px 32px -8px rgba(50, 50, 93, 0.20); --shadow-dropdown: 0 8px 24px -4px rgba(50, 50, 93, 0.16); --shadow-focus-ring: 0 0 0 3px rgba(99, 91, 255, 0.25); --shadow-cta-ring: 0 0 0 3px rgba(99, 91, 255, 0.30); --shadow-btn: 0 1px 1px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(50, 50, 93, 0.10); --shadow-btn-hover: 0 4px 12px -2px rgba(99, 91, 255, 0.30); } /* Body 폰트 — Inter primary (Stripe Sohne는 비공개), Pretendard 한국어 폴백 */ [data-brand="stripe"] body, .brand-stripe body, [data-brand="stripe"] { font-family: 'Inter Variable', Inter, 'Pretendard Variable', Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }