/* Design tokens — colors, radii, shadows. Single source of truth; component styles reference these variables rather than hardcoding values. WARM REDESIGN (Direction C). Coral accent on warm paper; light + dark via [data-theme] on . The block at the bottom keeps the ORIGINAL token names (--panel, --radius, --shadow, --accent-soft …) as aliases so every existing component stylesheet reskins with zero edits. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root, [data-theme="light"] { --bg: #FAF7F4; /* warm paper canvas */ --surface: #FFFFFF; --surface-2: #F4EFE9; /* subtle warm panel / hover */ --surface-3: #EFE8E1; --border: #ECE4DC; --border-strong:#DCD1C6; --ink: #221C17; /* headings, warm near-black */ --text: #322A23; --muted: #8B7F74; --faint: #B3A89D; --accent: #E85B2E; /* coral */ --accent-hover: #D24D22; --accent-press: #BC421B; --accent-soft: #FBE7DC; /* peach tint */ --accent-soft2: #F7D7C6; --accent-text: #B5431B; /* coral text on peach */ --on-accent: #FFFFFF; --good:#15825A; --good-soft:#DBF1E6; --warn:#B5740E; --warn-soft:#FBEFD2; --danger:#CD3F3F; --danger-soft:#FBE2DF; --refund:#6E4FE0; --refund-soft:#EAE4FD; --transfer:#2D67D8; --transfer-soft:#E2EAFB; /* money movements in/out */ /* source-of-truth chip colours (badge / source_kind filter) */ --src-email:#2D67D8; --src-email-soft:#E2EAFB; --src-phone:#15825A; --src-phone-soft:#DBF1E6; --src-wallet:#8A4FCF; --src-wallet-soft:#EFE4FB; --src-manual:#C77A12; --src-manual-soft:#FBEFD2; --shadow-sm: 0 1px 2px rgba(34,28,23,.06); --shadow-md: 0 4px 18px rgba(34,28,23,.07); --shadow-lg: 0 16px 40px rgba(34,28,23,.12); --shadow-accent: 0 10px 26px rgba(232,91,46,.26); --topbar-bg: rgba(250,247,244,.82); --code-bg: #F4EFE9; } [data-theme="dark"] { --bg: #181410; --surface: #221D18; --surface-2: #2C261F; --surface-3: #362E26; --border: #352D25; --border-strong:#4A3F35; --ink: #F8F3EC; --text: #ECE3D9; --muted: #A99D8F; --faint: #786C5E; --accent: #FF6B3D; --accent-hover: #FF7E55; --accent-press: #E85B2E; --accent-soft: #3A2419; --accent-soft2: #4A2C1C; --accent-text: #FF8A60; --on-accent: #1A0E07; --good:#3BC489; --good-soft:#16352A; --warn:#E6A23C; --warn-soft:#3A2E14; --danger:#F06868; --danger-soft:#3A1E1C; --refund:#9D86F5; --refund-soft:#241D3D; --transfer:#5B8CF0; --transfer-soft:#1A2440; --src-email:#5B8CF0; --src-email-soft:#1A2440; --src-phone:#3BC489; --src-phone-soft:#13332A; --src-wallet:#B083F0; --src-wallet-soft:#271B3A; --src-manual:#E6A23C; --src-manual-soft:#352713; --shadow-sm: 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 6px 22px rgba(0,0,0,.36); --shadow-lg: 0 18px 44px rgba(0,0,0,.50); --shadow-accent: 0 10px 26px rgba(255,107,61,.28); --topbar-bg: rgba(24,20,16,.82); --code-bg: #2C261F; } /* radii + type scale (theme-independent) */ :root { --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px; --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, Menlo, Consolas, monospace; /* ---- Legacy aliases ---------------------------------------------------- Original token names the existing component CSS still references. Mapped onto the warm palette so panel.css / form.css / badge.css etc. reskin untouched. Remove these only once every component file has migrated to the names above. */ --panel: var(--surface); --radius: var(--r); --shadow: var(--shadow-md); }