/* ══════════════════════════════════════════════════════════ al-variables.css — Toss Light/Dark 단일 디자인 토큰 시스템 ══════════════════════════════════════════════════════════ */ /* ── TOSS LIGHT 테마 ── */ :root, [data-bs-theme=light] { color-scheme: light; /* Toss Light 브랜드 & 배경 */ --al-bg: #f2f4f6; /* 토스 슬레이트 차콜 라이트 배경 */ --al-sf: #ffffff; /* 퓨어 화이트 서페이스 카드 */ --al-sf2: #f8fafc; /* 서페이스 2 */ --al-sf3: #eef2f7; /* 서페이스 3 */ --al-bdr: rgba(0, 0, 0, 0.07); /* 아주 부드러운 경계선 */ /* 토스 시그니처 블루 (#2563eb for WCAG AA button contrast) */ --al-pri: #2563eb; --al-pri-l: #3182f6; --al-pri-d: #1b64da; --al-acc: #ff9500; /* 시인성 최우선 고대비 타이포그래피 */ --al-tx: #191f28; /* 선명한 블랙 타이틀/본문 */ --al-txm: #4e5968; /* 선명한 세컨더리/라벨 */ --al-txd: #6b7684; /* 부드러운 딤 텍스트 */ --al-r: 20px; --sidebar-w: 260px; --al-shadow: 0 4px 18px rgba(0, 0, 0, 0.04); --al-shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.07); --al-shadow-xl: 0 18px 54px rgba(0, 0, 0, 0.12); --topbar-bg: rgba(255, 255, 255, 0.92); --sidebar-active-color: #ffffff; --btn-close-filter: none; /* Bootstrap 5 오버라이드 (라이트) */ --bs-body-bg: var(--al-bg); --bs-body-color: var(--al-tx); --bs-border-color: var(--al-bdr); --bs-card-bg: var(--al-sf); --bs-card-color: var(--al-tx); --bs-card-border-color: var(--al-bdr); --bs-secondary-bg: var(--al-sf2); --bs-tertiary-bg: var(--al-sf3); --bs-emphasis-color: var(--al-tx); --bs-secondary-color: var(--al-txm); --bs-heading-color: var(--al-tx); --bs-primary: #3182f6; --bs-primary-rgb: 49, 130, 246; /* 컴포넌트별 보더 색상 */ --al-border-success: rgba(32, 201, 151, 0.3); --al-border-danger: rgba(240, 68, 82, 0.3); --al-border-info: rgba(49, 130, 246, 0.3); --al-border-warning: rgba(255, 149, 0, 0.3); /* KPI 카드 상단 강조 */ --kpi-income-top: rgba(32, 201, 151, 0.6); --kpi-expense-top: rgba(240, 68, 82, 0.6); --kpi-balance-top: rgba(49, 130, 246, 0.6); --kpi-count-top: rgba(255, 149, 0, 0.6); --kpi-savings-top: rgba(56, 189, 248, 0.6); --kpi-daily-top: rgba(167, 139, 250, 0.6); /* ── 타이포그래피 스케일 ── */ --al-text-xs: 0.6875rem; --al-text-sm: 0.8125rem; --al-text-base: 0.9375rem; --al-text-lg: 1.0625rem; --al-text-xl: 1.25rem; --al-text-2xl: 1.5rem; --al-text-3xl: 1.875rem; --al-leading-tight: 1.25; --al-leading-normal: 1.6; /* ── 상태 색상 (시멘틱) ── */ --al-success: #20c997; --al-success-bg: rgba(32, 201, 151, 0.1); --al-success-bdr: rgba(32, 201, 151, 0.3); --al-danger: #f04452; --al-danger-bg: rgba(240, 68, 82, 0.1); --al-danger-bdr: rgba(240, 68, 82, 0.3); --al-warning: #ff9500; --al-warning-bg: rgba(255, 149, 0, 0.1); --al-warning-bdr: rgba(255, 149, 0, 0.3); --al-info: #3182f6; --al-info-bg: rgba(49, 130, 246, 0.1); --al-info-bdr: rgba(49, 130, 246, 0.3); /* Chart category palette */ --al-chart-1: #3182f6; --al-chart-2: #0d9488; --al-chart-3: #ea580c; --al-chart-4: #db2777; --al-chart-5: #0369a1; --al-chart-6: #65a30d; --al-chart-7: #9333ea; --al-chart-8: #b45309; --al-chart-income: #20c997; --al-chart-expense: #f04452; /* ── 트랜지션 ── */ --al-tr-fast: 100ms cubic-bezier(.2, .8, .2, 1); --al-tr-base: 200ms cubic-bezier(.2, .8, .2, 1); --al-tr-slow: 350ms cubic-bezier(.2, .8, .2, 1); /* ── 포커스 링 ── */ --al-focus-ring: 0 0 0 3px rgba(49, 130, 246, 0.28); /* ── z-index 레이어 ── */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1020; --z-sidebar: 1030; --z-modal: 1040; --z-fab: 1025; --z-toast: 9999; --z-progress: 9998; } /* ── TOSS DARK 테마 ── */ [data-bs-theme=dark] { color-scheme: dark; /* Toss Dark 브랜드 & 배경 */ --al-bg: #17171c; /* 딥 챠콜 다크 배경 */ --al-sf: #23252b; /* 다크 챠콜 표면 카드 */ --al-sf2: #2c2c35; /* 서페이스 2 */ --al-sf3: #363842; /* 서페이스 3 */ --al-bdr: rgba(255, 255, 255, 0.08); /* 토스 시그니처 블루 (버튼용 고대비 #1b64da) */ --al-pri: #1b64da; --al-pri-l: #3182f6; --al-pri-d: #124db3; --al-acc: #ff9500; /* 시인성 최우선 고대비 타이포그래피 (다크) */ --al-tx: #f9faf8; /* 눈에 선명하게 띄는 화이트 본문 */ --al-txm: #cbd5e1; /* 선명한 라이트 Muted 라벨 */ --al-txd: #94a3b8; /* 선명한 라이트 Dimmed */ --al-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); --al-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); --al-shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.7); --topbar-bg: rgba(23, 23, 28, 0.92); --sidebar-active-color: #ffffff; --btn-close-filter: invert(1) grayscale(1) brightness(2); /* Bootstrap 5 오버라이드 (다크) */ --bs-body-bg: var(--al-bg); --bs-body-color: var(--al-tx); --bs-border-color: var(--al-bdr); --bs-card-bg: var(--al-sf); --bs-card-color: var(--al-tx); --bs-card-border-color: var(--al-bdr); --bs-secondary-bg: var(--al-sf2); --bs-tertiary-bg: var(--al-sf3); --bs-emphasis-color: var(--al-tx); --bs-secondary-color: var(--al-txm); --bs-heading-color: var(--al-tx); --bs-primary: #3182f6; --bs-primary-rgb: 49, 130, 246; --al-border-success: rgba(32, 201, 151, 0.3); --al-border-danger: rgba(240, 68, 82, 0.3); --al-border-info: rgba(49, 130, 246, 0.3); --al-border-warning: rgba(255, 149, 0, 0.3); --kpi-income-top: rgba(32, 201, 151, 0.5); --kpi-expense-top: rgba(240, 68, 82, 0.5); --kpi-balance-top: rgba(49, 130, 246, 0.5); --kpi-count-top: rgba(255, 149, 0, 0.5); --kpi-savings-top: rgba(56, 189, 248, 0.5); --kpi-daily-top: rgba(167, 139, 250, 0.5); /* 다크 상태 색상 오버라이드 */ --al-success-bg: rgba(32, 201, 151, 0.15); --al-success-bdr: rgba(32, 201, 151, 0.3); --al-danger-bg: rgba(240, 68, 82, 0.15); --al-danger-bdr: rgba(240, 68, 82, 0.3); --al-warning-bg: rgba(255, 149, 0, 0.15); --al-warning-bdr: rgba(255, 149, 0, 0.3); --al-info-bg: rgba(49, 130, 246, 0.15); --al-info-bdr: rgba(49, 130, 246, 0.3); --al-chart-1: #3182f6; --al-chart-2: #0d9488; --al-chart-3: #ea580c; --al-chart-4: #ec4899; --al-chart-5: #0284c7; --al-chart-6: #65a30d; --al-chart-7: #a855f7; --al-chart-8: #d97706; --al-chart-income: #20c997; --al-chart-expense: #f04452; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--al-bg); color: var(--al-tx); font-size: var(--al-text-base); line-height: var(--al-leading-normal); overflow-x: hidden; font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; }