/* --------------------------------------------------------------------------- Lite Work Designs — design tokens Brand hues you love (slate / blush / periwinkle / orchid), expressed through a semantic light + dark system. Switch is driven by [data-theme] on . --------------------------------------------------------------------------- */ :root{ /* brand palette — unchanged hues */ --slate:#44516E; --deep:#3A4661; --blush:#CC9C8A; --peri:#C6C9E4; --orchid:#CB8FB4; --warm:#7E4F3A; /* type */ --font-display:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --font-mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --maxw:1160px; --nav-h:64px; --portal-pad:1.5rem; --radius:18px; --radius-lg:26px; /* ---- semantic: LIGHT (default) ---- */ --bg:#F6F5F2; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#FBFAF7; --text:#2A3142; --text-strong:#1C2230; --text-soft:#6E7791; --line:rgba(42,49,66,.13); --line-2:rgba(42,49,66,.22); --accent:#B26B97; /* deeper orchid for contrast on paper */ --accent-2:#7C84B8; /* periwinkle-ink */ --on-accent:#FFFFFF; --glow-1:rgba(203,143,180,.32); --glow-2:rgba(159,180,224,.30); --glow-3:rgba(204,156,138,.26); --feather:#A6ABCB; --feather-strong:#8E94BE; --btn-bg:#222836; --btn-fg:#F6F5F2; --success:#1D9E75; --danger:#C2575A; --shadow:0 20px 54px rgba(42,49,66,.10); --shadow-sm:0 8px 24px rgba(42,49,66,.07); color-scheme:light; } [data-theme="dark"]{ --bg:#121319; --bg-2:#171922; --surface:#191C26; --surface-2:#1F2331; --text:#E7E6EF; --text-strong:#F5F4FB; --text-soft:#9AA0B6; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.20); --accent:#D9A9C9; /* orchid that glows on ink */ --accent-2:#AEB4DE; --on-accent:#1A1D27; --glow-1:rgba(203,143,180,.30); --glow-2:rgba(159,180,224,.26); --glow-3:rgba(204,156,138,.20); --feather:#C6C9E4; --feather-strong:#D9A9C9; --btn-bg:#ECEAF2; --btn-fg:#1A1D27; --success:#3FBF93; --danger:#E08487; --shadow:0 24px 64px rgba(0,0,0,.5); --shadow-sm:0 10px 30px rgba(0,0,0,.4); color-scheme:dark; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} html,body{min-height:100%} body{ font-family:var(--font-body); font-weight:400; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .4s ease,color .4s ease; } ::selection{background:var(--accent);color:var(--on-accent)} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit} a{color:inherit;text-decoration:none} img{max-width:100%} .hidden{display:none !important} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}