/* ============================================================ Trendsic Dynamics — Worker App tokens.css · design system as CSS custom properties Light is the default :root theme. Dark is opt-in via [data-theme="dark"] on any ancestor (usually or ). ============================================================ */ :root { color-scheme: light; /* --- Brand ---------------------------------------------------- */ --ts-blue: #4E6EF2; /* cornflower / royal — primary */ --ts-blue-deep: #2A2A7C; /* deep navy-indigo — dark spine */ --ts-blue-press: #3F5BD6; /* primary pressed */ /* --- Surfaces & background ----------------------------------- */ --bg: #F3F5FA; /* app canvas */ --surface: #FFFFFF; /* cards, sheets, bars */ --surface-2: #F6F8FC; /* inset fields, subtle fills */ --surface-3: #F1F3F8; /* avatars, number chips */ --border: #E4E8F1; /* hairlines, card borders */ --border-strong:#C7D0EE; /* emphasized / dashed borders */ --scrim: rgba(15,16,48,.45); /* modal backdrop */ /* --- Text ----------------------------------------------------- */ --text: #1A202C; /* near-black ink */ --text-2: #5A6377; /* secondary */ --text-3: #8E97AC; /* tertiary / hints */ --text-4: #A6ADC0; /* disabled / faint */ /* --- Primary (brand-blue = info/primary) --------------------- */ --primary: var(--ts-blue); --primary-press: var(--ts-blue-press); --primary-tint: #EAF0FF; /* tinted bg behind primary */ --primary-on-tint:#3551C6; /* text/icon on the tint */ --on-primary: #FFFFFF; /* text/icon on solid primary */ --accent: var(--ts-blue); /* emphasized outlines */ /* --- Status semantics ---------------------------------------- */ /* green = done/on-track */ --success: #1F9D57; --success-tint: #E4F6EC; --success-on: #127C42; /* amber = attention/paused */ --warn: #E08A0B; --warn-tint: #FCF1DE; --warn-on: #B16C04; /* red = overdue/issue */ --danger: #DC4338; --danger-tint: #FBE6E4; --danger-on: #C0322A; /* brand-blue = info/primary */ --info: var(--ts-blue); --info-tint: #EAF0FF; --info-on: #3551C6; /* --- Typography ---------------------------------------------- */ --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fs-display: 30px; /* screen titles */ --fs-title: 24px; /* large headings */ --fs-h2: 22px; /* card headings */ --fs-h3: 18px; /* section headings */ --fs-row: 17px; /* row title / emphasis */ --fs-body: 16px; /* body — arm's-length readable */ --fs-sm: 14px; /* labels, secondary body */ --fs-xs: 13px; /* captions */ --fs-mono: 13px; /* mono labels */ --fs-mono-sm: 11px; /* mono micro labels */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.5; --ls-caps: .34em; /* spaced caps lockups */ --ls-tight: -.02em; /* display tracking */ /* --- Spacing scale (4px base) -------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* --- Radii ---------------------------------------------------- */ --r-sm: 8px; --r-md: 11px; --r-input: 14px; --r-card: 18px; --r-lg: 20px; --r-pill: 999px; /* --- Shadows -------------------------------------------------- */ --sh-card: 0 18px 40px -28px rgba(20,24,60,.40); --sh-pop: 0 14px 28px -14px rgba(78,110,242,.50); --sh-btn: 0 8px 18px -6px rgba(78,110,242,.55); --sh-btn-success: 0 8px 18px -6px rgba(31,157,87,.50); --sh-tab: 0 -2px 10px rgba(20,24,60,.04); --sh-phone: 0 30px 60px -22px rgba(20,24,60,.28); /* --- Control sizing (field constraints) ---------------------- */ --touch-min: 48px; /* minimum glove-friendly target */ --btn-h: 56px; /* full-width primary action */ --btn-h-sm: 50px; /* secondary action */ --field-h: 56px; /* inputs */ /* --- Motion --------------------------------------------------- */ --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(.2,.8,.2,1); } /* ============================================================ DARK THEME — navy surfaces, bright blue accent popping ============================================================ */ [data-theme="dark"] { color-scheme: dark; --bg: #0F1030; --surface: #1A1C44; --surface-2: #14163A; --surface-3: #23264F; --border: #34386E; --border-strong:#4A4F84; --scrim: rgba(4,5,20,.6); --text: #EDEFF8; --text-2: #A6ADCF; --text-3: #777FA6; --text-4: #5A6196; --primary: #4E6EF2; --primary-press: #5E7BFF; --primary-tint: #232A5E; --primary-on-tint:#A9B8FF; --on-primary: #FFFFFF; --accent: #6E8BFF; /* brightened for dark surfaces */ --success: #34C77B; --success-tint: #173A2A; --success-on: #34C77B; --warn: #F2A93B; --warn-tint: #3D2E14; --warn-on: #F2A93B; --danger: #FF6B5E; --danger-tint: #3F1F1E; --danger-on: #FF8C82; --info: #6E8BFF; --info-tint: #20264F; --info-on: #6E8BFF; --sh-card: 0 18px 40px -24px rgba(10,12,40,.70); --sh-phone: 0 30px 60px -20px rgba(10,12,40,.55); } /* Respect OS preference automatically when no explicit theme is set. Remove this block if you only switch themes manually. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg:#0F1030; --surface:#1A1C44; --surface-2:#14163A; --surface-3:#23264F; --border:#34386E; --border-strong:#4A4F84; --scrim:rgba(4,5,20,.6); --text:#EDEFF8; --text-2:#A6ADCF; --text-3:#777FA6; --text-4:#5A6196; --primary:#4E6EF2; --primary-press:#5E7BFF; --primary-tint:#232A5E; --primary-on-tint:#A9B8FF; --on-primary:#fff; --accent:#6E8BFF; --success:#34C77B; --success-tint:#173A2A; --success-on:#34C77B; --warn:#F2A93B; --warn-tint:#3D2E14; --warn-on:#F2A93B; --danger:#FF6B5E; --danger-tint:#3F1F1E; --danger-on:#FF8C82; --info:#6E8BFF; --info-tint:#20264F; --info-on:#6E8BFF; --sh-card:0 18px 40px -24px rgba(10,12,40,.70); --sh-phone:0 30px 60px -20px rgba(10,12,40,.55); } }