/* ============================================================================ tokens.css — shared design tokens for the running dashboard ---------------------------------------------------------------------------- One sheet, linked from every template. Holds two themes: a neutral dark default (:root) and a light theme (:root[data-theme="light"]). The theme is set on by a tiny bootstrap script (injected into every page head by the backend) before first paint, so there is no flash. Hex values carry shadcn-style semantic names; legacy --bg/--accent/--green aliases keep the not-yet-migrated pages working. ============================================================================ */ :root{ color-scheme: dark; /* surfaces */ --background: #0a0a0c; --foreground: #fafafa; --card: #16161a; --card-foreground: #fafafa; --popover: #16161a; --popover-foreground:#fafafa; /* muted / secondary */ --muted: #1f1f24; --muted-foreground: #a1a1aa; --secondary: #1f1f24; --secondary-foreground:#fafafa; /* brand */ --primary: #5b9dff; --primary-foreground:#08152b; /* semantic role solids (also used as text-on-tint and as chart strokes) */ --success: #4ade80; --success-foreground:#08160d; --warning: #fbbf24; --warning-foreground:#1a1303; --destructive: #fb7185; --destructive-foreground:#1a0608; --info: #a78bfa; --teal: #2dd4bf; /* role tints (pill / badge backgrounds + their borders) */ --bg-primary: #0e2236; --bd-primary: #1d3a4d; --bg-success: #0c2a1c; --bd-success: #16432d; --bg-warning: #2a230c; --bd-warning: #403515; --bg-destructive: #2a0c12; --bd-destructive: #43161f; --bg-info: #1c1640; --bd-info: #2e2563; /* lines + focus */ --border: #2a2a31; --input: #2a2a31; --ring: #5b9dff; --ring-shadow: rgba(91,157,255,.30); --chart-grid: #232329; --overlay: rgba(0,0,0,.65); /* radius scale */ --radius: 10px; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-pill: 999px; --space: 12px; /* type: Inter first (loaded by the backend), system fallback. 13px body floor */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; /* legacy aliases — resolve at use, so they follow whichever theme is active */ --bg: var(--background); --panel: var(--card); --panel2: var(--muted); --text: var(--foreground); --sub: var(--muted-foreground); --line: var(--border); --accent: var(--primary); --green: var(--success); --amber: var(--warning); --red: var(--destructive); --purple: var(--info); } /* ---- light theme -------------------------------------------------------- */ :root[data-theme="light"]{ color-scheme: light; --background: #ffffff; --foreground: #09090b; --card: #ffffff; --card-foreground: #09090b; --popover: #ffffff; --popover-foreground:#09090b; --muted: #f4f4f5; --muted-foreground: #52525b; --secondary: #f4f4f5; --secondary-foreground:#18181b; --primary: #2f7ff0; --primary-foreground:#ffffff; --success: #15803d; --success-foreground:#ffffff; --warning: #b45309; --warning-foreground:#ffffff; --destructive: #dc2626; --destructive-foreground:#ffffff; --info: #7c3aed; --teal: #0d9488; --bg-primary: #e7f0fe; --bd-primary: #c4ddfb; --bg-success: #dcfce7; --bd-success: #bbf7d0; --bg-warning: #fef3c7; --bd-warning: #fde68a; --bg-destructive: #fee2e2; --bd-destructive: #fecaca; --bg-info: #ede9fe; --bd-info: #ddd6fe; --border: #e4e4e7; --input: #e4e4e7; --ring: #2f7ff0; --ring-shadow: rgba(47,127,240,.25); --chart-grid: #e9e9ec; --overlay: rgba(9,9,11,.45); } /* ---- reset + base ------------------------------------------------------- */ *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-sans); font-size:var(--fs-sm); line-height:1.5; -webkit-font-smoothing:antialiased; } .wrap{ max-width:1100px; margin:0 auto; padding:16px; } @media (min-width:768px){ .wrap{ padding:24px; } } h1{ font-size:var(--fs-xl); margin:0; font-weight:600; } h2{ font-size:var(--fs-lg); margin:22px 0 10px; font-weight:600; } h3{ font-size:var(--fs-md); margin:0; font-weight:600; } a{ color:var(--primary); text-decoration:none; } a:hover{ text-decoration:underline; } .muted{ color:var(--muted-foreground); } .sub{ color:var(--muted-foreground); font-size:var(--fs-xs); line-height:1.5; } .text-xs{ font-size:var(--fs-xs); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---- accessibility floor ------------------------------------------------ */ :where(button, a, input, select, textarea, [tabindex], [role="radio"], [role="tab"], [role="menuitem"], summary):focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ---- layout helpers ----------------------------------------------------- */ .row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; } .cluster{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .stack{ display:flex; flex-direction:column; gap:var(--space); } .grid{ display:grid; gap:12px; } .grid-2{ grid-template-columns:1fr 1fr; } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:1023px){ .grid-3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:767px){ .grid-2,.grid-3{ grid-template-columns:1fr; } .grid-4{ grid-template-columns:repeat(2,1fr); } }