/* ========================================================================== ArchiTask — Design tokens Single source of truth for color, type, space, radius, elevation, motion. Light is defined on bare :root. Dark is redefined under BOTH the OS media query and the [data-theme="dark"] scope so the in-app toggle wins either way. ========================================================================== */ :root { color-scheme: light; /* --- Surfaces & ink ---------------------------------------------------- The content column is white; the rail is the one tinted plane, held apart by its own hairline. Cards read against white on their border. */ --bg: #ffffff; /* page plane and topbar */ --surface: #ffffff; /* cards, panels, chart surface */ --surface-2: #f8f7f7; /* insets, table headers, hover wash */ --surface-3: #f1efee; /* pressed / selected wash */ --sidebar-bg: #ffffff; /* the rail — held apart by its hairline */ --sidebar-ink: #55504e; --sidebar-ink-hi: #1a1716; --sidebar-hover: rgba(26,23,22,.045); --sidebar-active: #f5f3f2; /* active nav pill */ --text: #1a1716; --text-2: #55504e; --text-3: #8d8783; --text-inv: #ffffff; /* Neutral greys, so the rail and the insets read as one family rather than a blue-tinted set sitting next to a neutral one. */ --border: #e9e6e5; --border-strong: #d8d4d2; --ring: rgba(4,120,87,.26); /* --- Accent ------------------------------------------------------------ Two colours doing two jobs. --brand is Black Mamba, a warm near-black. It carries the chrome: primary buttons, active states, filled chips. White on it clears 13.7:1. --accent is emerald. It carries highlights and data marks — the logo, focus rings, the tab underline, progress bars, chart marks — and clears 5.5:1 with white. It is never a labelled chip: --good is also green, and a chip in the accent would read as a status. The two are kept 43 degrees apart in hue so a half-finished progress bar cannot pass for "Completed". Neither is ever body text. Tinting the base `a` rule was the old trap: every block link then rendered its whole contents in the accent. */ --brand: #332c2b; --brand-hover: #46403e; --brand-active: #211c1b; --brand-on: #ffffff; --brand-soft: #f5f3f2; --brand-soft-2: #e9e5e3; --brand-ink: #332c2b; --accent: #047857; --accent-hover: #036549; --accent-soft: #edfaf5; --accent-ink: #04503a; /* --- Status (fixed, never themed; always paired with icon + label) ------ */ --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --good-soft: #e6f6e6; --warning-soft: #fef4e0; --serious-soft: #fdeee7; --critical-soft: #fbeaea; --good-ink: #056605; --warning-ink: #8a5d00; --serious-ink: #a4441c; --critical-ink: #a12626; --neutral-soft: #eef0f4; --neutral-ink: #4a5568; /* --- Data-viz ------------------------------------------------------------ Every chart here is single-series or an ordinal ramp, so one hue carries all of it. --series-2..4 are held in reserve for a genuinely CATEGORICAL chart, and are validated as a set with slot 1 — reach for those rather than inventing a shade, because a categorical pair needs real chroma. */ --series-1: #047857; /* the single-series mark */ --series-2: #eb6834; /* orange — reserved for categorical, validated */ --series-3: #1baf7a; /* aqua — reserved for categorical, validated */ --series-4: #eda100; /* yellow — reserved for categorical, validated */ /* Ordinal emerald ramp (task pipeline: todo -> done), validated --ordinal */ --ord-1: #5cc9a7; --ord-2: #2aa781; --ord-3: #047857; --ord-4: #04503a; --ord-track: #eaf6f1; /* the meter / ring track */ /* --- Chart chrome ------------------------------------------------------ */ --grid: #efedec; --axis: #d8d4d2; --viz-muted: #8b95a5; /* --- Type --------------------------------------------------------------- Geist, falling back to the platform sans. The fallback is a real design state, not an error case — the file:// build runs on it. */ --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-11: .6875rem; --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-38: 2.375rem; /* --- Space (4px base) -------------------------------------------------- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; /* --- Radius ------------------------------------------------------------- The whole corner language lives here — change these and the build follows. Nothing else hardcodes a corner except three things that are not theme choices: circles (avatars, dots, the toggle knob), the 1-3px chart swatches, and the 4px rounded data-end on chart bars, which is a data-visualisation spec rather than a style. Sharp 2 / 4 / 6 / 8 Default 6 / 9 / 14 / 18 Rounded 8 / 12 / 16 / 20 <- current Soft 10 / 14 / 20 / 26 */ --r-sm: 8px; /* chips of chrome: kbd, swatches, segmented items */ --r-md: 12px; /* buttons, inputs, menu items, icon tiles */ --r-lg: 16px; /* cards, panels, tables */ --r-xl: 20px; /* dialogs */ --r-full: 999px; /* true capsules: meters, tracks, the switch */ --r-pill: var(--r-full); /* badges, chips, counts — set to --r-sm for the squared-off look */ /* --- Elevation --------------------------------------------------------- Surfaces lean on the hairline border, not on shadow. Only things that genuinely float — menus, modals, toasts — cast one. */ --sh-1: 0 1px 2px rgba(16,24,40,.04); --sh-2: 0 2px 6px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04); --sh-3: 0 6px 16px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04); --sh-4: 0 16px 40px rgba(16,24,40,.14), 0 4px 10px rgba(16,24,40,.06); /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 120ms; --t-med: 200ms; --t-slow: 320ms; /* --- Layout ------------------------------------------------------------ */ --rail-w: 252px; --rail-w-collapsed: 72px; --topbar-h: 60px; --page-max: 1440px; } /* ------------------------------------------------------------------------- Dark mode — same roles, steps re-chosen for the dark surface (not flipped). ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #121110; --surface: #1a1817; --surface-2: #211f1d; --surface-3: #2a2725; --sidebar-bg: #141312; --sidebar-ink: #a09a96; --sidebar-ink-hi:#f5f3f2; --sidebar-hover: rgba(255,255,255,.045); --sidebar-active:#262322; --text: #f5f3f2; --text-2: #b8b2ae; --text-3: #837d79; --border: #2b2827; --border-strong: #3b3735; --ring: rgba(16,185,129,.32); --brand: #f2f0ef; --brand-hover: #ffffff; --brand-active: #d9d5d3; --brand-on: #1a1817; --brand-soft: #262322; --brand-soft-2: #33302e; --brand-ink: #e8e4e2; --accent: #10b981; --accent-hover: #34d399; --accent-soft: #0e2a21; --accent-ink: #6ee7b7; --good-soft: #0f2810; --good-ink: #4cc94c; --warning-soft: #2e2410; --warning-ink: #fab219; --serious-soft: #2e1d15; --serious-ink: #f0a181; --critical-soft: #2e1616; --critical-ink: #ea6a6a; --neutral-soft: #242832; --neutral-ink: #b3b9c4; --series-1: #10b981; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --ord-1: #047857; --ord-2: #10b981; --ord-3: #5cc9a7; --ord-4: #a7f3d0; --ord-track: #152a23; --grid: #262322; --axis: #3b3735; --viz-muted: #8b95a5; --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3); --sh-3: 0 6px 16px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3); --sh-4: 0 16px 40px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.4); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #121110; --surface: #1a1817; --surface-2: #211f1d; --surface-3: #2a2725; --sidebar-bg: #141312; --sidebar-ink: #a09a96; --sidebar-ink-hi:#f5f3f2; --sidebar-hover: rgba(255,255,255,.045); --sidebar-active:#262322; --text: #f5f3f2; --text-2: #b8b2ae; --text-3: #837d79; --border: #2b2827; --border-strong: #3b3735; --ring: rgba(16,185,129,.32); --brand: #f2f0ef; --brand-hover: #ffffff; --brand-active: #d9d5d3; --brand-on: #1a1817; --brand-soft: #262322; --brand-soft-2: #33302e; --brand-ink: #e8e4e2; --accent: #10b981; --accent-hover: #34d399; --accent-soft: #0e2a21; --accent-ink: #6ee7b7; --good-soft: #0f2810; --good-ink: #4cc94c; --warning-soft: #2e2410; --warning-ink: #fab219; --serious-soft: #2e1d15; --serious-ink: #f0a181; --critical-soft: #2e1616; --critical-ink: #ea6a6a; --neutral-soft: #242832; --neutral-ink: #b3b9c4; --series-1: #10b981; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --ord-1: #047857; --ord-2: #10b981; --ord-3: #5cc9a7; --ord-4: #a7f3d0; --ord-track: #152a23; --grid: #262322; --axis: #3b3735; --viz-muted: #8b95a5; --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3); --sh-3: 0 6px 16px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3); --sh-4: 0 16px 40px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.4); }