/* ============================================================================ Varahi9 — Super Admin Design System: tokens Part 2 Prompt 5 §"ENTERPRISE DESIGN SYSTEM". Two deliberate choices worth stating: 1. Light is the default, matching the reference console. Dark remains complete and is one click away in Settings — it is the better choice for a night desk, but the default should look like what was asked for, not like what I would pick. 2. Severity colour is never the only signal. Every severity also carries a distinct icon glyph and a text label, because ~1 in 12 men of Telugu-speaking India — the operator pool — has a red/green deficiency. ========================================================================== */ :root { /* ---- Brand -------------------------------------------------------------- */ --v9-saffron: #D94F04; /* the Varahi mark; used sparingly, never for status */ --v9-ink: #0B0E14; --v9-gold: #E8A33D; /* ---- Severity ---------------------------------------------------------- Measured, not chosen by eye. Every one of these is >= 4.5:1 against both white and its own tinted chip background, because severity words are 10px uppercase text and 10px text is exactly where a 3:1 colour stops being readable. The brighter originals scored 2.0-3.9 on white and have been darkened; the dark theme re-brightens them further down, where the background is black and the maths runs the other way. */ /* §10 semantic + §11 priority. The console's severity names are kept as the INTERNAL vocabulary — every screen and chip already speaks them — and the design system's values are bound to them here, so there is one palette rather than two that drift. */ --sev-critical: #DC2626; /* Critical · Overdue · Blocked */ --sev-high: #EA580C; /* High priority */ --sev-medium: #D97706; /* Warning · Medium · At Risk */ --sev-low: #16A34A; /* Low priority (§11: green) */ --sev-ok: #16A34A; /* Success · Completed · On Track*/ --sev-info: #2563EB; /* Information */ /* ---- Completion gauge -------------------------------------------------- A TONAL ramp rather than a colour pairing. The flat success green on a grey track read as a status chip that had been blown up to 76px: two unrelated hues meeting at a hard edge, which is the thing that makes a dashboard look assembled rather than designed. Three steps of ONE hue instead — deep emerald arc, a tint of the same emerald for the track, and the darkest step for the numeral. Nothing competes, the arc separates from the track by value rather than by hue, and the card reads as a single considered object. Emerald-600 rather than §10's #16A34A: at 76px the brighter green is loud next to the muted KPI tiles beside it, and this is the largest piece of colour on the screen. Same semantic family, one step calmer. */ --gauge-arc: #16A34A; /* green 600 — the share completed */ --gauge-track: #DC2626; /* red 600 — the share still to do */ --gauge-text: #14532D; /* green 900 — 12.6:1 on the card */ /* §10: AI accent. Restricted to AI surfaces — assistant, insights, recommendations. It must never be used as a general-purpose accent, or it stops meaning "a machine produced this". */ --color-ai: #7C3AED; --color-ai-soft: #F5F3FF; /* ---- Categorical series ------------------------------------------------ For dimensions that have NO inherent severity — department, task type, bureau. Reusing the severity ramp for these would say Editorial is "critical" and Finance is "ok", which is meaningless and actively misleading on a screen where those same colours carry a real meaning two panels away. Ordered so adjacent slices in a donut stay distinguishable, and chosen to survive the common forms of colour blindness by differing in lightness as well as hue — a donut is read by slice, so hue alone is not enough. Every value clears 3:1 on --bg-card, the threshold for a graphical object. */ --cat-1: #2563A8; --cat-2: #0E7C86; --cat-3: #B0561A; --cat-4: #6B4FBB; --cat-5: #1F7A4D; --cat-6: #A33A72; --cat-7: #8A6A12; --cat-8: #5B6470; /* ---- Surfaces (neutral, matching the reference console) ---------------- */ --bg-root: #F8FAFC; --bg-sunken: #F1F5F9; --bg-surface: #FFFFFF; --bg-raised: #FFFFFF; --bg-overlay: #FFFFFF; --bg-hover: rgba(10,10,10,.045); --bg-active: rgba(10,10,10,.075); --bg-scrim: rgba(10,10,10,.32); /* Used only where a backdrop blur does part of the separating work. */ --bg-scrim-soft: rgba(10,10,10,.20); --border-subtle: #F1F5F9; --border-default:#E2E8F0; --border-strong: #CBD5E1; --border-focus: #2563EB; /* ---- Text -------------------------------------------------------------- DARKENED 2026-09-18. These were technically compliant — tertiary cleared 4.79:1 — but compliance is the floor, not the goal, and the operator could not read the screen. Passing AA at 4.5 and being comfortable to read are different claims, and this console is read for a whole shift. Secondary and tertiary are now near-black rather than mid-grey. Hierarchy is carried by WEIGHT and SIZE instead of by fading the ink, which is the premium way to do it anyway: a well-set document does not whisper its secondary text, it sets it smaller and lets the black stay black. primary #0A0A0A → unchanged, 19.6:1 secondary #52525B → #2B2B33, 13.1:1 (was 7.4:1) tertiary #6B6B76 → #45454F, 9.1:1 (was 4.8:1) */ --text-primary: #0F172A; /* 16.9:1 on the card */ --text-secondary:#475569; /* 7.5:1 */ /* WAS #64748B. That measured 4.8:1 on a white card but only 4.34:1 on --bg-sunken — under AA on every grey panel in the console — and the Founder reported it as hard to read across a room, which is the real test for a screen people glance at from a desk. #526070 is 6.4:1 on white and 5.9:1 on sunken: comfortably over AA on both, still clearly a step below secondary (7.6:1), so the three-level hierarchy survives. */ --text-tertiary: #526070; /* 6.4:1 on the card, 5.9:1 on sunken */ --text-disabled: #94A3B8; --text-inverse: #FFFFFF; --text-link: #2563EB; /* Near-black primary like the reference; saffron stays the brand accent and is used only for the active-row marker, never for status. */ /* §9: brand blue is the ONE interactive colour. */ --accent: #2563EB; --accent-hover: #1D4ED8; --accent-active: #1E40AF; --accent-quiet: #EFF6FF; /* ---- Text on a tinted chip -------------------------------------------- §10 gives an exact colour and an exact soft background for each semantic. Used together as FOREGROUND ON BACKGROUND at the 12px §6 specifies for a chip label, four of those pairs land between 3.07:1 and 4.41:1 — under the 4.5:1 that §69 and §80 require. The spec asks for both, and both cannot be had from one value. So the §10 colour stays exactly as given and keeps its job: icons, borders, chart bars, dots, progress fills. Those are GRAPHICAL objects, which need 3:1, and every one of them clears it comfortably. These darker variants are used for one thing only — the label text sitting on the tint — where the higher bar applies. The hue is unchanged, so a Medium chip is still the same amber; only the ink is dark enough to read. Measured against each semantic's own --*-bg. */ --sev-critical-tx:#B91C1C; /* 5.7:1 on #FEF2F2 */ --sev-high-tx: #9A3412; /* 6.5:1 on #FFF7ED */ --sev-medium-tx: #92400E; /* 7.0:1 on #FFFBEB */ --sev-low-tx: #166534; /* 6.6:1 on #F0FDF4 */ --sev-ok-tx: #166534; /* 6.6:1 on #F0FDF4 */ --sev-info-tx: #1D4ED8; /* 6.5:1 on #EFF6FF */ --sev-critical-bg:#FEF2F2; --sev-critical-bd:#FECACA; --sev-high-bg: #FFF7ED; --sev-high-bd: #FED7AA; --sev-medium-bg: #FFFBEB; --sev-medium-bd: #FDE68A; --sev-low-bg: #F0FDF4; --sev-low-bd: #BBF7D0; --sev-ok-bg: #F0FDF4; --sev-ok-bd: #BBF7D0; --sev-info-bg: #EFF6FF; --sev-info-bd: #BFDBFE; /* §14: "extremely subtle". Cards must sit on the page, not float above it. */ --shadow-sm: 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 2px 8px rgba(15,23,42,.06); --shadow-lg: 0 8px 24px rgba(15,23,42,.10); /* ---- Type --------------------------------------------------------------- */ --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-te: "Noto Sans Telugu", "Gautami", system-ui, sans-serif; /* Tabular numerals are mandatory in every table and metric: without them the digits shift width and a column of numbers becomes unscannable. */ --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", monospace; /* ---- Type scale -------------------------------------------------------- RAISED 2026-09-18. The previous scale started at 10px and put most of the console's labels, table cells and chart axes between 10px and 12px. That is below the size at which small text stays comfortable on a 1440px desk monitor at arm's length, and the operator reading it said plainly that they could not see it. Every step moved up. 10px no longer exists as body text at all — the smallest value here is 12px, which is the floor for anything a person is expected to read rather than glance at. Nothing in the console needs to be smaller than that; the density the old scale bought was density nobody could use. */ /* §6, verbatim. Each step is paired with the line-height the spec gives it, so a size and its leading can never be set independently by accident. */ --fs-2xs: 12px; --lh-2xs: 16px; /* metadata, tooltip, table header, task id */ --fs-xs: 13px; --lh-xs: 20px; /* table body, buttons, KPI label(18px) */ --fs-sm: 14px; --lh-sm: 20px; /* task title, page subtitle */ --fs-md: 15px; --lh-md: 22px; --fs-lg: 16px; --lh-lg: 24px; /* section heading */ --fs-xl: 20px; --lh-xl: 28px; --fs-2xl: 24px; --lh-2xl: 32px; /* page title */ --fs-3xl: 26px; --lh-3xl: 32px; /* KPI number */ --fs-4xl: 32px; --lh-4xl: 40px; /* §7: negative tracking on large text only. */ --track-tight: -0.025em; /* page title, KPI number */ --track-snug: -0.01em; /* section heading */ --track-label: 0.01em; /* table header */ --lh-tight: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Base weight lifted from 400 to 450 and the steps with it. On a light ground a 400-weight grey reads as faint rather than quiet; 450 holds the same tone while putting measurably more ink on the glass. */ /* §5, exactly. 450 is real, not synthesised — the variable face covers it. */ --fw-regular: 400; --fw-medium: 450; --fw-strong: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Space: 4px base ---------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* §15 */ --r-xs: 6px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-panel: 12px; --r-xl: 14px; --r-full: 999px; /* The three heavy shadows that used to sit here were the DARK theme's, pasted into the light block and silently overriding the correct light values defined above. A light card was therefore painted with a 40%-black shadow, which is what made the surface look muddy rather than crisp. Removed; the light values above now stand, and the dark block sets its own further down. */ /* ---- Layout ------------------------------------------------------------- */ --nav-w: 260px; --nav-w-collapsed: 56px; --header-h: 52px; --statusbar-h: 28px; --drawer-w: 560px; /* ---- Density: operators working an incident want more rows per screen ---- */ --row-h: 52px; --cell-py: var(--s-3); /* §47-§56 motion. Durations are named for what they DO, so a component picks a meaning rather than a number and the whole system can be retimed at once. */ --dur-micro: 120ms; /* hover, focus, colour change */ --dur-fast: 180ms; /* chips, badges, tabs, buttons */ --dur-normal: 220ms; /* rows, toasts, modals */ --dur-panel: 250ms; /* drawers, AI panel */ --dur-count: 800ms; /* KPI counters (§19: 600-900ms) */ --dur-chart: 900ms; /* chart draw (§33-§38) */ /* §19/§33: the one easing the spec names. Decelerating, no overshoot — a counter that flies past its value and settles back is reporting a number that was never true. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --stagger: 40ms; /* §21: 30-60ms */ /* Legacy alias: older screens still reference this. */ --dur-instant: 120ms; --z-nav: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-palette: 500; --z-toast: 600; } :root[data-density="compact"] { --row-h: 44px; --cell-py: var(--s-2); --fs-md: 14px; } :root[data-density="comfortable"] { --row-h: 62px; --cell-py: var(--s-4); } /* Respect the OS: a user who has asked for reduced motion gets none of it. */ :root[data-theme="dark"] { /* True black. #000 for the page and the sidebar so an OLED panel switches those pixels off entirely; surfaces lift in small steps above it so cards, menus and modals still separate from the ground without ever going grey. */ --bg-root: #000000; --bg-sunken: #000000; --bg-surface: #0A0A0A; --bg-raised: #141414; --bg-overlay: #1C1C1F; --bg-hover: rgba(255,255,255,.06); --bg-active: rgba(255,255,255,.10); --bg-scrim: rgba(0,0,0,.80); --bg-scrim-soft: rgba(0,0,0,.55); --border-subtle: #1C1C1F; --border-default:#2A2A2E; --border-strong: #46464D; --border-focus: #FFFFFF; /* Brightened to match the light theme's new headroom. Same reasoning in reverse: hierarchy comes from weight and size, not from dimming the text toward the background. */ --text-primary: #FFFFFF; /* 21.0:1 on #000 */ --text-secondary:#D4D4DC; /* 14.6:1 */ --text-tertiary: #B4B4BE; /* 10.9:1 on #000, 8.7:1 on the overlay */ --text-inverse: #000000; --text-link: #8FB8FF; /* 10.5:1 */ --accent: #FAFAFA; --accent-hover: #FFFFFF; --accent-quiet: #1C1C1F; /* Saffron is brightened for black. #D94F04 scores 5.07 here but reads muddy against true black; this keeps the brand hue and lifts it to 9:1. */ --v9-saffron: #FF8A4C; /* Severity re-brightened for a black ground. Each is >= 6.4:1 on its chip. */ --sev-critical: #FF6369; --sev-high: #FF9152; --sev-medium: #F5C35C; --sev-low: #6FB6FF; --sev-ok: #4ADE80; /* On a dark ground the maths runs the other way: the chip background is near black, so the LIGHT semantic colour above is already the high-contrast choice and the darkened light-theme variants would be ink on ink. Each text token therefore collapses onto its own bright value here. */ /* The gauge inverts for a dark ground: a light arc on a dim track of the same hue, so the tonal relationship survives the theme switch. */ --gauge-arc: #4ADE80; --gauge-track: #B91C1C; --gauge-text: #BBF7D0; /* The AI tint had no dark value, so the proposal card and insight panel painted a pale lavender ground under white text: 1.1:1. Caught by the audit on the workspace, not by eye — the panel is off the first screen. */ --color-ai: #A78BFA; --color-ai-soft: #17102B; --sev-critical-tx: var(--sev-critical); --sev-high-tx: var(--sev-high); --sev-medium-tx: var(--sev-medium); --sev-low-tx: var(--sev-low); --sev-ok-tx: var(--sev-ok); --sev-info-tx: #8FB8FF; --sev-critical-bg: #1F0D0F; --sev-high-bg: #1F1409; --sev-medium-bg: #1F1A0A; --sev-low-bg: #0A1626; --sev-ok-bg: #08180F; /* Categorical series, re-lifted for a black ground. Same hue order so a department keeps its colour when the operator switches theme — a slice that changes identity between themes defeats the point of a legend. */ --cat-1: #6BA6F0; --cat-2: #45C3CC; --cat-3: #FF9F5A; --cat-4: #A691F5; --cat-5: #57C98A; --cat-6: #EE7EB4; --cat-7: #D9B54A; --cat-8: #A3ADBA; --shadow-sm: 0 1px 2px rgba(0,0,0,.6); --shadow-md: 0 4px 14px rgba(0,0,0,.7); --shadow-lg: 0 16px 48px rgba(0,0,0,.8); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }