/* ============================================================ Vantia — Design tokens Industrial-tech ERP: neutral zinc surfaces, hairline borders instead of shadows, one locked brand accent (safety orange), four semantic status colors for state (not brand) use. Theme is switched via [data-theme="light"|"dark"] on , set before first paint by the inline script in dashboard.html (see theme.js) — falls back to prefers-color-scheme below. ============================================================ */ :root { /* ---- type --------------------------------------------------- No build step yet, so Inter / JetBrains Mono are not self-hosted. Stacks fall back to the closest system faces (Segoe UI on Windows reads very close to Inter's business register). Drop woff2 files into static/fonts/ and add @font-face blocks here when available. */ --font-sans: Inter, "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --text-2xs: 11px; --text-2xs-lh: 14px; --text-xs: 12px; --text-xs-lh: 16px; --text-sm: 13px; --text-sm-lh: 18px; --text-base: 14px; --text-base-lh: 20px; --text-lg: 16px; --text-lg-lh: 22px; --text-xl: 20px; --text-xl-lh: 26px; --text-2xl: 24px; --text-2xl-lh: 30px; /* ---- spacing (compact scale, 4px base) ---------------------- */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; /* ---- shape lock ---------------------------------------------- buttons/inputs/table cells = sm, panels/cards = md, badges/chips/avatars = full. No other radii are used. */ --radius-sm: 4px; --radius-md: 6px; --radius-full: 999px; /* ---- layout dims --------------------------------------------- */ --sidebar-w: 240px; --sidebar-w-collapsed: 56px; --topbar-h: 52px; /* ---- z-index scale --------------------------------------------- */ --z-sidebar: 20; --z-topbar: 30; --z-dropdown: 40; --z-modal: 50; --z-toast: 60; /* ---- motion (functional only, no cinematic flourish) ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 180ms; /* ---- brand accent (locked, single hue: safety orange) --------- */ --accent: #ea580c; --accent-strong: #c2410c; --accent-soft-bg: #fff1e8; --accent-soft-border: #fbceac; --accent-fg: #ffffff; /* ---- semantic status colors (function, not brand) -------------- */ --status-success: #15803d; --status-success-bg: #f0fdf4; --status-success-border: #bbf7d0; --status-warning: #a16207; --status-warning-bg: #fefce8; --status-warning-border: #fde68a; --status-danger: #b91c1c; --status-danger-bg: #fef2f2; --status-danger-border: #fecaca; --status-info: #1d4ed8; --status-info-bg: #eff6ff; --status-info-border: #bfdbfe; /* ---- classification tags (project "clase" taxonomy, not status) -- a small fixed categorical palette, distinct from the brand accent and from status colors, matching scoring.py's CLASE_META intent. */ --cat-originacion: #7c3aed; --cat-originacion-bg: #f5f3ff; --cat-originacion-border: #ddd6fe; --cat-licitacion: #1d4ed8; --cat-licitacion-bg: #eff6ff; --cat-licitacion-border: #bfdbfe; --cat-expansion: #0e7490; --cat-expansion-bg: #ecfeff; --cat-expansion-border: #a5f3fc; /* ============ LIGHT THEME (default) ============ */ --bg-app: #fafafa; --bg-panel: #ffffff; --bg-panel-2: #f4f4f5; --bg-hover: #f4f4f5; --bg-active: #e4e4e7; --bg-scrim: rgb(24 24 27 / 0.4); --border: #e4e4e7; --border-strong: #d4d4d8; --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #71717a; --text-on-accent: #ffffff; --shadow-dropdown: 0 4px 16px rgb(24 24 27 / 0.10), 0 1px 2px rgb(24 24 27 / 0.06); --logo-blend-mode: multiply; --logo-filter: none; color-scheme: light; } :root[data-theme="dark"] { --bg-app: #18181b; --bg-panel: #212124; --bg-panel-2: #29292d; --bg-hover: #2a2a2e; --bg-active: #323236; --bg-scrim: rgb(0 0 0 / 0.6); --border: #323236; --border-strong: #3f3f46; --text-primary: #f4f4f5; --text-secondary: #d4d4d8; --text-muted: #8f8f97; --text-on-accent: #ffffff; --accent-soft-bg: #3a2213; --accent-soft-border: #7c3a12; --status-success: #4ade80; --status-success-bg: #0f2116; --status-success-border: #14532d; --status-warning: #eab308; --status-warning-bg: #241d09; --status-warning-border: #713f12; --status-danger: #f87171; --status-danger-bg: #2a1213; --status-danger-border: #7f1d1d; --status-info: #60a5fa; --status-info-bg: #0f1c2e; --status-info-border: #1e3a8a; --cat-originacion: #c4b5fd; --cat-originacion-bg: #241b3d; --cat-originacion-border: #5b21b6; --cat-licitacion: #93c5fd; --cat-licitacion-bg: #10203a; --cat-licitacion-border: #1e40af; --cat-expansion: #67e8f9; --cat-expansion-bg: #082830; --cat-expansion-border: #155e75; --shadow-dropdown: 0 8px 24px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3); /* white-bg/black-stroke wordmark: invert then screen-blend so the white canvas disappears into the dark panel and the strokes read white. See components.css .logo-mark */ --logo-blend-mode: screen; --logo-filter: invert(1); color-scheme: dark; } /* graceful no-JS fallback: if data-theme was never set, honor OS pref */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-app: #18181b; --bg-panel: #212124; --bg-panel-2: #29292d; --bg-hover: #2a2a2e; --bg-active: #323236; --bg-scrim: rgb(0 0 0 / 0.6); --border: #323236; --border-strong: #3f3f46; --text-primary: #f4f4f5; --text-secondary: #d4d4d8; --text-muted: #8f8f97; --accent-soft-bg: #3a2213; --accent-soft-border: #7c3a12; --status-success: #4ade80; --status-success-bg: #0f2116; --status-success-border: #14532d; --status-warning: #eab308; --status-warning-bg: #241d09; --status-warning-border: #713f12; --status-danger: #f87171; --status-danger-bg: #2a1213; --status-danger-border: #7f1d1d; --status-info: #60a5fa; --status-info-bg: #0f1c2e; --status-info-border: #1e3a8a; --cat-originacion: #c4b5fd; --cat-originacion-bg: #241b3d; --cat-originacion-border: #5b21b6; --cat-licitacion: #93c5fd; --cat-licitacion-bg: #10203a; --cat-licitacion-border: #1e40af; --cat-expansion: #67e8f9; --cat-expansion-bg: #082830; --cat-expansion-border: #155e75; --shadow-dropdown: 0 8px 24px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3); --logo-blend-mode: screen; --logo-filter: invert(1); color-scheme: dark; } }