/* ============================================================ Jaisun /app/ design tokens Components reference ONLY the semantic tokens below (never hex). Theme is driven by (auto is resolved to one of those by includes/theme-auto.php). ============================================================ */ :root { /* type */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace; --text-xs: .75rem; --text-sm: .875rem; --text-base: .9575rem; --text-lg: 1.125rem; --text-xl: 1.35rem; --text-2xl: 1.65rem; /* spacing — 4px grid */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; /* radii / shadows / motion */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px; --shadow-1: 0 1px 3px rgb(0 0 0 / .14); --shadow-2: 0 8px 30px rgb(0 0 0 / .28); --ease: cubic-bezier(.2, .8, .2, 1); --dur: 160ms; /* layout */ --sidebar-w: 300px; --content-max: 48rem; } /* ── Dark (default) ─────────────────────────────────────── */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0f1218; --bg-raised: #151a23; --bg-overlay: #1c222e; --surface: #181e29; --surface-hover: #1f2735; --border: #29313f; --border-strong: #3a4456; --text: #e8ebf1; --text-muted: #98a2b5; --text-faint: #6b7488; --accent: #4f8cff; --accent-hover: #6ba0ff; --accent-soft: rgb(79 140 255 / .14); --accent-fg: #fff; --danger: #ef5b6a; --danger-soft: rgb(239 91 106 / .14); --success: #3fc98c; --success-soft: rgb(63 201 140 / .14); --warn: #e5b454; --warn-soft: rgb(229 180 84 / .16); --warn-wash: rgb(229 180 84 / .06); /* agent chat context (purple — distinct from accent so "not the private PA" is unmissable) */ --agent: #b18cf5; --agent-soft: rgb(177 140 245 / .16); --agent-wash: rgb(177 140 245 / .06); --bubble-user: #24344d; --bubble-user-border: #35496b; --bubble-user-text: #e9eef7; --code-bg: #10141b; --code-border: #232b39; --scrim: rgb(0 0 0 / .55); --mark-bg: rgb(229 180 84 / .3); /* categorical chart series (Reports) — CVD-validated against --surface, fixed assignment order 1→6; "other" is a deliberate neutral for the folded tail */ --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-6: #008300; --chart-other: #6b7488; } /* ── Light ──────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg: #f5f6f9; --bg-raised: #ffffff; --bg-overlay: #ffffff; --surface: #ffffff; --surface-hover: #f0f2f6; --border: #e2e6ee; --border-strong: #c8cfdc; --text: #1d2433; --text-muted: #5c6577; --text-faint: #8c94a6; --accent: #2f6fed; --accent-hover: #205ede; --accent-soft: rgb(47 111 237 / .1); --accent-fg: #fff; --danger: #d63649; --danger-soft: rgb(214 54 73 / .1); --success: #148a5c; --success-soft: rgb(20 138 92 / .12); --warn: #a97613; --warn-soft: rgb(169 118 19 / .14); --warn-wash: rgb(169 118 19 / .05); --agent: #7440cf; --agent-soft: rgb(116 64 207 / .12); --agent-wash: rgb(116 64 207 / .05); --bubble-user: #dfe9fb; --bubble-user-border: #c3d4f0; --bubble-user-text: #1d2433; --code-bg: #f1f3f8; --code-border: #e2e6ee; --scrim: rgb(15 18 25 / .35); --mark-bg: rgb(240 200 90 / .5); /* categorical chart series — same hues re-stepped for the light surface */ --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100; --chart-5: #e87ba4; --chart-6: #008300; --chart-other: #8c94a6; --shadow-1: 0 1px 3px rgb(20 30 50 / .1); --shadow-2: 0 8px 30px rgb(20 30 50 / .16); } /* Logo swap per theme */ .logo-light { display: none; } [data-theme="light"] .logo-light { display: inline-block; } [data-theme="light"] .logo-dark { display: none; } /* ── highlight.js token colors (both themes) ─────────────── */ .hljs { color: var(--text); background: transparent; } .hljs-comment, .hljs-quote { color: var(--text-faint); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-meta { color: #c792ea; } .hljs-string, .hljs-attr, .hljs-regexp { color: #7ec699; } .hljs-number, .hljs-literal { color: #f0937a; } .hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #82aaff; } .hljs-built_in, .hljs-type, .hljs-class .hljs-title { color: #ffcb6b; } .hljs-variable, .hljs-template-variable, .hljs-attribute { color: #f07178; } .hljs-symbol, .hljs-bullet, .hljs-link { color: #89ddff; } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; } [data-theme="light"] .hljs-keyword, [data-theme="light"] .hljs-selector-tag, [data-theme="light"] .hljs-meta { color: #8b31a8; } [data-theme="light"] .hljs-string, [data-theme="light"] .hljs-attr, [data-theme="light"] .hljs-regexp { color: #237042; } [data-theme="light"] .hljs-number, [data-theme="light"] .hljs-literal { color: #b3542c; } [data-theme="light"] .hljs-title, [data-theme="light"] .hljs-name, [data-theme="light"] .hljs-selector-id, [data-theme="light"] .hljs-selector-class { color: #1e56c9; } [data-theme="light"] .hljs-built_in, [data-theme="light"] .hljs-type { color: #9a6a03; } [data-theme="light"] .hljs-variable, [data-theme="light"] .hljs-template-variable, [data-theme="light"] .hljs-attribute { color: #b3384a; } [data-theme="light"] .hljs-symbol, [data-theme="light"] .hljs-bullet, [data-theme="light"] .hljs-link { color: #0e7490; }