1@import "tailwindcss";23/* ------------------------------------------------------------------ design tokens4 Brand-neutral palette (validated with the dataviz skill in light & dark).5 Everything is referenced by role; the dark values swap in one place. */6:root {7 color-scheme: light;8 --surface-0: #f4f4f1; /* page plane */9 --surface-1: #fcfcfb; /* cards, chart surface */10 --surface-2: #f0efec; /* table header, inset */11 --surface-3: #e6e5df; /* hover wash */12 --ink-1: #0b0b0b;13 --ink-2: #52514e;14 --ink-3: #898781;15 --hairline: #e1e0d9;16 --axis: #c3c2b7;17 --border: rgba(11, 11, 11, 0.10);18 --accent: #2a78d6;19 --accent-ink: #1c5cab;20 --accent-soft: #cde2fb;21 --series-1: #2a78d6;22 --series-2: #eb6834;23 --series-3: #1baf7a;24 --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec; --seq-400: #3987e5;25 --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b;26 --ok: #0ca30c; --ok-ink: #006300; --ok-soft: #dcf3dc;27 --warn: #fab219; --warn-ink: #7a4f00; --warn-soft: #fdf0cc;28 --serious: #ec835a; --serious-ink: #8a3a1a; --serious-soft: #fde3d8;29 --crit: #d03b3b; --crit-ink: #a02020; --crit-soft: #f8dada;30 --focus: #2a78d6;31}32@media (prefers-color-scheme: dark) {33 :root {34 color-scheme: dark;35 --surface-0: #0d0d0d;36 --surface-1: #1a1a19;37 --surface-2: #222220;38 --surface-3: #2c2c2a;39 --ink-1: #f0efec;40 --ink-2: #c3c2b7;41 --ink-3: #898781;42 --hairline: #2c2c2a;43 --axis: #383835;44 --border: rgba(255, 255, 255, 0.10);45 --accent: #3987e5;46 --accent-ink: #86b6ef;47 --accent-soft: #184f95;48 --series-1: #3987e5;49 --series-2: #d95926;50 --series-3: #199e70;51 --seq-100: #0d366b; --seq-200: #184f95; --seq-300: #256abf; --seq-400: #2a78d6;52 --seq-500: #3987e5; --seq-600: #6da7ec; --seq-700: #9ec5f4;53 --ok: #0ca30c; --ok-ink: #5fd15f; --ok-soft: #10321a;54 --warn: #fab219; --warn-ink: #fab219; --warn-soft: #3a2b05;55 --serious: #ec835a; --serious-ink: #f3a483; --serious-soft: #3d1f12;56 --crit: #d03b3b; --crit-ink: #ef7a7a; --crit-soft: #3d1414;57 --focus: #6da7ec;58 }59}6061@theme inline {62 --color-surface-0: var(--surface-0);63 --color-surface-1: var(--surface-1);64 --color-surface-2: var(--surface-2);65 --color-surface-3: var(--surface-3);66 --color-ink-1: var(--ink-1);67 --color-ink-2: var(--ink-2);68 --color-ink-3: var(--ink-3);69 --color-hairline: var(--hairline);70 --color-axis: var(--axis);71 --color-border: var(--border);72 --color-accent: var(--accent);73 --color-accent-ink: var(--accent-ink);74 --color-accent-soft: var(--accent-soft);75 --color-ok: var(--ok);76 --color-ok-ink: var(--ok-ink);77 --color-ok-soft: var(--ok-soft);78 --color-warn: var(--warn);79 --color-warn-ink: var(--warn-ink);80 --color-warn-soft: var(--warn-soft);81 --color-serious: var(--serious);82 --color-serious-ink: var(--serious-ink);83 --color-serious-soft: var(--serious-soft);84 --color-crit: var(--crit);85 --color-crit-ink: var(--crit-ink);86 --color-crit-soft: var(--crit-soft);87 --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;88 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;89}9091/* ------------------------------------------------------------------ base */92html, body { height: 100%; }93body {94 background: var(--surface-0);95 color: var(--ink-1);96 font-family: var(--font-sans);97 font-size: 14px;98 line-height: 1.45;99 -webkit-font-smoothing: antialiased;100 text-rendering: optimizeLegibility;101}102* { border-color: var(--border); }103:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }104::selection { background: var(--accent-soft); }105a { color: inherit; }106code, pre, kbd, .mono { font-family: var(--font-mono); }107.tnum { font-variant-numeric: tabular-nums; }108109/* ------------------------------------------------------------------ components */110@layer components {111 .card { @apply rounded-lg border border-border bg-surface-1 p-4; }112 .card-title { @apply mb-3 flex items-center justify-between gap-2 text-sm font-semibold text-ink-1; }113 .muted { @apply text-ink-3; }114 .label { @apply mb-1 block text-xs font-medium text-ink-2; }115 .input {116 @apply w-full rounded-md border border-border bg-surface-1 px-2.5 py-1.5 text-sm text-ink-1 placeholder:text-ink-3;117 @apply focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/30 disabled:opacity-60;118 }119 select.input { @apply pr-7; }120 .btn {121 @apply inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-surface-1 px-3 py-1.5 text-sm font-medium text-ink-1;122 @apply hover:bg-surface-3 disabled:cursor-not-allowed disabled:opacity-50 active:translate-y-px;123 }124 .btn-primary { @apply border-transparent bg-accent text-white hover:bg-accent hover:brightness-110; }125 .btn-danger { @apply border-transparent bg-crit text-white hover:brightness-110; }126 .btn-sm { @apply px-2 py-1 text-xs; }127 .btn-ghost { @apply border-transparent bg-transparent; }128 .pill { @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap; }129 .table-wrap { @apply -mx-4 overflow-x-auto px-4 sm:mx-0 sm:px-0; }130 .table { @apply w-full border-collapse text-sm; }131 .table th { @apply sticky top-0 z-[1] border-b border-hairline bg-surface-2 px-2.5 py-2 text-left text-xs font-semibold text-ink-2 whitespace-nowrap; }132 .table td { @apply border-b border-hairline px-2.5 py-1.5 align-top text-ink-1; }133 .table tbody tr:hover td { background: var(--surface-2); }134 .table .num { @apply text-right tnum; }135 .kbd { @apply rounded border border-border bg-surface-2 px-1 py-px font-mono text-[11px] text-ink-2; }136 .banner { @apply rounded-md border px-3 py-2 text-sm; }137 .nav-link { @apply flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm text-ink-2 hover:bg-surface-3 hover:text-ink-1; }138 .nav-link[aria-current="page"] { @apply bg-accent-soft text-accent-ink font-medium; }139 .section-title { @apply text-lg font-semibold tracking-tight text-ink-1; }140 .skeleton { @apply animate-pulse rounded bg-surface-3; }141}142143/* recharts chrome */144.recharts-cartesian-grid line { stroke: var(--hairline); }145.recharts-cartesian-axis line, .recharts-cartesian-axis-tick-line { stroke: var(--axis); }146.recharts-text { fill: var(--ink-3); font-size: 11px; }147.recharts-tooltip-cursor { stroke: var(--axis); }148149/* dialog backdrop */150dialog::backdrop { background: rgba(0, 0, 0, 0.45); }151152/* hide number spinners for dense forms */153input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }154