/* kb design tokens - semantic roles, light + dark, motion, radii. Theme selection: light is the default. Dark applies under :root[data-theme="dark"] and, when no theme is chosen, under the OS preference. The dark block therefore exists twice below; keep both copies identical. An element with data-theme="light" (a light-only widget host, e.g. calendarViewPage) gets the light values back, whatever the page theme is; an element with data-theme="dark" gets the dark values (a page-local override, e.g. Proformasystem's own light/dark switch). Rules elsewhere that are written for :root[data-theme="dark"] only (glass card, page ground) still follow the page theme. */ @layer kb.tokens { :root, [data-theme="light"] { /* glass exists only in dark; consumers use var(--kb-card-glass, var(--kb-card)) */ --kb-card-glass: initial; /* type */ --kb-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --kb-font-mono: ui-monospace, Consolas, "Cascadia Mono", monospace; /* colour roles */ --kb-primary: #2b56c4; --kb-primary-ink: #ffffff; --kb-danger: #d23535; --kb-danger-ink: #ffffff; --kb-success: #15803d; --kb-success-ink: #ffffff; --kb-warning: #b26b00; --kb-page: #f4f4f4; /* neutral grey, no blue cast */ --kb-card: #ffffff; --kb-text: #0f1b33; --kb-text-muted: #5d6b84; --kb-line: #e6eaf1; --kb-line-strong: #b9c3d4; --kb-control-edge: #74829c; /* border of a form control (checkbox ring, grip): >= 3:1 on card and page */ --kb-chip: #e8eefc; --kb-hover: rgba(43, 86, 196, .06); --kb-focus-ring: #2b56c4; --kb-menu-from: #0d1f44; --kb-menu-to: #0a1733; /* status: accent (dot, border), ink (text), bg (faint tint) */ --kb-status-new: #2b56c4; --kb-status-new-ink: #2b56c4; --kb-status-new-bg: #e6edfd; --kb-status-warn: #b26b00; --kb-status-warn-ink: #8f5700; --kb-status-warn-bg: #fff8e6; --kb-status-ok: #15803d; --kb-status-ok-ink: #15803d; --kb-status-ok-bg: #ecf8f1; --kb-status-err: #d23535; --kb-status-err-ink: #c42f2f; --kb-status-err-bg: #fdeeee; --kb-status-muted: #5d6b84; --kb-status-muted-ink: #5d6b84; --kb-status-muted-bg: #eef1f6; /* charts (kb.chart): series in fixed order, blue first; track = unfilled ring, grid = baseline/gridlines. Marks >= 3:1 against the card (WCAG 2 ratio, measured): light on --kb-card #fff: 1 6.50, 2 4.59, 3 5.45, 4 5.25. Dark on --kb-card #111b31 / on --kb-card-glass over --kb-page (= #0e172b): 1 5.60/5.85, 2 5.18/5.41, 3 5.01/5.22, 4 4.76/4.97. Both modes also pass the dataviz palette checks (OKLCH lightness band, chroma, adjacent CVD separation). Track and grid are not marks (1.2-1.3:1 by design). */ --kb-chart-1: #2b56c4; --kb-chart-2: #00856c; --kb-chart-3: #7a4fd0; --kb-chart-4: #b83d7c; --kb-chart-track: #e6edfd; --kb-chart-grid: #e6eaf1; /* depth */ --kb-shadow: 0 6px 20px rgba(10, 30, 70, .07); --kb-shadow-pop: 0 14px 40px rgba(10, 30, 70, .18); /* shape */ --kb-radius-card: 6px; --kb-radius: 4px; /* motion */ --kb-skew: -14deg; --kb-ease-out: cubic-bezier(.3, .7, .2, 1); --kb-ease-spring: cubic-bezier(.34, 1.6, .5, 1); --kb-ease-momentum: cubic-bezier(.7, 0, .3, 1); } :root[data-theme="dark"], [data-theme="dark"] { --kb-primary: #4069d4; --kb-primary-ink: #ffffff; --kb-danger: #d43f3f; --kb-danger-ink: #ffffff; --kb-success: #22a05a; --kb-success-ink: #0a1122; --kb-warning: #f0b54f; --kb-page: #0a1122; --kb-card: #111b31; --kb-card-glass: rgba(17, 27, 49, .58); --kb-text: #e6ecf8; --kb-text-muted: #90a0bd; --kb-line: #1c2842; --kb-line-strong: #3a4a6a; --kb-control-edge: #62749c; /* border of a form control (checkbox ring, grip): >= 3:1 on card and page */ --kb-chip: #18264a; --kb-hover: rgba(138, 166, 255, .08); --kb-focus-ring: #8aa6ff; --kb-menu-from: #060d1e; --kb-menu-to: #050a17; --kb-status-new: #8aa6ff; --kb-status-new-ink: #8aa6ff; --kb-status-new-bg: #1a2a55; --kb-status-warn: #f0b54f; --kb-status-warn-ink: #f0b54f; --kb-status-warn-bg: #3a2c12; --kb-status-ok: #4cc985; --kb-status-ok-ink: #4cc985; --kb-status-ok-bg: #123826; --kb-status-err: #f07a7a; --kb-status-err-ink: #f07a7a; --kb-status-err-bg: #3d1919; --kb-status-muted: #90a0bd; --kb-status-muted-ink: #90a0bd; --kb-status-muted-bg: #1a2540; --kb-chart-1: #6f8ff0; --kb-chart-2: #1a9e92; --kb-chart-3: #9478ea; --kb-chart-4: #d0609c; --kb-chart-track: #1e2d55; --kb-chart-grid: #26355a; --kb-shadow: 0 6px 24px rgba(0, 0, 0, .35); --kb-shadow-pop: 0 14px 40px rgba(0, 0, 0, .55); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --kb-primary: #4069d4; --kb-primary-ink: #ffffff; --kb-danger: #d43f3f; --kb-danger-ink: #ffffff; --kb-success: #22a05a; --kb-success-ink: #0a1122; --kb-warning: #f0b54f; --kb-page: #0a1122; --kb-card: #111b31; --kb-card-glass: rgba(17, 27, 49, .58); --kb-text: #e6ecf8; --kb-text-muted: #90a0bd; --kb-line: #1c2842; --kb-line-strong: #3a4a6a; --kb-control-edge: #62749c; /* border of a form control (checkbox ring, grip): >= 3:1 on card and page */ --kb-chip: #18264a; --kb-hover: rgba(138, 166, 255, .08); --kb-focus-ring: #8aa6ff; --kb-menu-from: #060d1e; --kb-menu-to: #050a17; --kb-status-new: #8aa6ff; --kb-status-new-ink: #8aa6ff; --kb-status-new-bg: #1a2a55; --kb-status-warn: #f0b54f; --kb-status-warn-ink: #f0b54f; --kb-status-warn-bg: #3a2c12; --kb-status-ok: #4cc985; --kb-status-ok-ink: #4cc985; --kb-status-ok-bg: #123826; --kb-status-err: #f07a7a; --kb-status-err-ink: #f07a7a; --kb-status-err-bg: #3d1919; --kb-status-muted: #90a0bd; --kb-status-muted-ink: #90a0bd; --kb-status-muted-bg: #1a2540; --kb-chart-1: #6f8ff0; --kb-chart-2: #1a9e92; --kb-chart-3: #9478ea; --kb-chart-4: #d0609c; --kb-chart-track: #1e2d55; --kb-chart-grid: #26355a; --kb-shadow: 0 6px 24px rgba(0, 0, 0, .35); --kb-shadow-pop: 0 14px 40px rgba(0, 0, 0, .55); } } }