/* * Flex 디자인 토큰 * * 출처: flex.team 시각 분석 * 컨셉: 한국 HR SaaS — 부드러운 라운드 + Pretendard + 선명한 neon green CTA * * 활성화: */ [data-brand="flex"], .brand-flex { /* Surface */ --surface-0: #ffffff; --surface-1: #f9f9fb; --surface-2: #f0f0f3; --surface-3: #e4e4e8; --surface-hover: #f3f3f6; --surface-active: #ebebef; --border-subtle: #ececef; /* Text */ --text-primary: #1d1d1f; --text-secondary: #69696e; --text-tertiary: #98989d; --text-inverse: #1d1d1f; /* neon green 위는 검정 텍스트 */ /* Brand — Flex neon green (살짝 톤 다운: AA 대비) */ --primary: #1d1d1f; --primary-hover: #0e0e10; --brand-accent: #00d040; /* 원본 #00ff44를 채도 약간 낮춤 */ --cta: #00d040; --cta-hover: #00b738; /* Status */ --destructive: #ff3b30; --destructive-light: #ffe6e4; --destructive-dark: #cc2f26; --destructive-border: #ffb3ad; --status-success: #00d040; --status-success-light: #ccf6d8; --status-success-dark: #00a635; --status-success-border: #99ecb1; --status-warning: #ff9500; --status-warning-light: #ffe9cc; --status-warning-dark: #cc7700; --status-warning-border: #ffd199; --status-info: #007aff; --status-info-light: #d6e9ff; --status-info-dark: #0062cc; --status-info-border: #a8cdff; /* Radius — Flex는 둥글둥글 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* Flex CTA */ --radius-full: 9999px; /* Shadow */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 6px 16px -2px rgba(0, 0, 0, 0.10); --shadow-elevated: 0 8px 24px -4px rgba(0, 0, 0, 0.12); --shadow-overlay: 0 16px 48px -8px rgba(0, 0, 0, 0.18); --shadow-toast: 0 12px 32px -8px rgba(0, 0, 0, 0.16); --shadow-dropdown: 0 8px 24px -4px rgba(0, 0, 0, 0.14); --shadow-focus-ring: 0 0 0 3px rgba(0, 208, 64, 0.25); --shadow-cta-ring: 0 0 0 3px rgba(0, 208, 64, 0.30); --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.10); --shadow-btn-hover: 0 4px 12px -2px rgba(0, 208, 64, 0.30); } /* Body 폰트 — Pretendard 그대로 (Flex와 동일) */ [data-brand="flex"] body, .brand-flex body, [data-brand="flex"] { font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; } /* CTA 위 검정 텍스트 강제 (neon green 위 white는 명도 부족) */ [data-brand="flex"] .btn-primary, .brand-flex .btn-primary { color: var(--text-inverse); }