/* ============================================================ Uplevate design tokens — single source of truth. Consumed by app-shell.css, components.css, forms-modern.css and mapped onto Bulma 1.x CSS variables below. Theme switching: (theme-toggle.js). ============================================================ */ :root { /* ---- Brand: the fineupp palette, shared with fineupp.com and Keycloak ---- Indigo is the brand, teal is the accent. Previously --eut-brand was doing BOTH jobs (the palette was monochromatically teal), so --eut-accent is a new slot, not a renamed one. ---- */ --eut-brand: #4c6ef5; --eut-brand-strong: #3b5bdb; /* text-safe on light surfaces (AA) */ --eut-brand-soft: rgba(76, 110, 245, .10); --eut-brand-glow: rgba(76, 110, 245, .35); --eut-accent: #20c997; --eut-accent-soft: rgba(32, 201, 151, .12); --eut-gradient-brand: linear-gradient(135deg, #4c6ef5 0%, #20c997 100%); --eut-gradient-hero: linear-gradient(140deg, #1a1d23 0%, #23304a 55%, #4c6ef5 130%); /* ---- Semantic ---- */ --eut-success: #2fb344; --eut-warning: #d9a406; --eut-danger: #d64545; --eut-info: #2f7fd6; /* ---- Surfaces & text (light = clean console) ---- */ --eut-bg: #f5f7f9; --eut-surface: #ffffff; --eut-surface-raised: #ffffff; --eut-border: #dde3ea; --eut-border-strong: #c6cfd9; --eut-text: #1c2733; /* slate, kin to logo #2d3748 */ --eut-text-soft: #51606f; --eut-text-faint: #8494a5; /* ---- Depth ---- */ --eut-shadow-xs: 0 1px 2px rgba(16, 24, 40, .06); --eut-shadow-sm: 0 1px 3px rgba(16, 24, 40, .09), 0 1px 2px rgba(16, 24, 40, .05); --eut-shadow-md: 0 4px 12px rgba(16, 24, 40, .10); --eut-shadow-lg: 0 12px 32px rgba(16, 24, 40, .16); --eut-focus-ring: 0 0 0 3px var(--eut-brand-glow); /* ---- Shape ---- */ --eut-radius-sm: 6px; --eut-radius-md: 12px; --eut-radius-lg: 16px; --eut-radius-full: 9999px; /* ---- Spacing (4px base) ---- */ --eut-space-1: 4px; --eut-space-2: 8px; --eut-space-3: 12px; --eut-space-4: 16px; --eut-space-5: 20px; --eut-space-6: 24px; --eut-space-7: 32px; --eut-space-8: 48px; /* ---- Typography ---- */ --eut-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --eut-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --eut-text-xs: .75rem; --eut-text-sm: .875rem; --eut-text-md: 1rem; --eut-text-lg: 1.25rem; --eut-text-xl: 1.5rem; --eut-text-2xl: 2rem; --eut-weight-medium: 500; --eut-weight-semibold: 600; --eut-weight-bold: 700; /* ---- Motion ---- */ --eut-ease: cubic-bezier(.25, .7, .35, 1); --eut-speed-fast: 150ms; --eut-speed: 220ms; /* ---- Layout ---- */ --eut-header-height: 3.5rem; --eut-nav-width: 230px; --eut-nav-rail-width: 75px; /* ---- Z-index ---- */ --eut-z-header: 100; --eut-z-nav: 110; --eut-z-backdrop: 120; --eut-z-panel: 130; --eut-z-toast: 9999; } /* ---- Dark theme: deep slate, teal glow (the flagship look) ---- */ [data-theme="dark"] { --eut-brand: #6b8afd; /* lifted for contrast on #1a1d23 */ --eut-brand-strong: #8ea6ff; --eut-brand-soft: rgba(107, 138, 253, .14); --eut-brand-glow: rgba(107, 138, 253, .30); --eut-accent: #20c997; --eut-accent-soft: rgba(32, 201, 151, .14); --eut-gradient-hero: linear-gradient(140deg, #1a1d23 0%, #23304a 55%, #4c6ef5 130%); --eut-success: #4ade80; --eut-warning: #fbbf24; --eut-danger: #f87171; --eut-info: #60a5fa; --eut-bg: #1a1d23; --eut-surface: #2a2d35; --eut-surface-raised: #333741; --eut-border: rgba(255, 255, 255, .10); --eut-border-strong: rgba(255, 255, 255, .18); --eut-text: #f1f3f5; --eut-text-soft: #adb5bd; --eut-text-faint: #66788a; --eut-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --eut-shadow-sm: 0 1px 3px rgba(0, 0, 0, .50); --eut-shadow-md: 0 4px 14px rgba(0, 0, 0, .50); --eut-shadow-lg: 0 14px 40px rgba(0, 0, 0, .60); } /* ============================================================ Bulma 1.x variable mapping — keeps every Bulma component on the token palette in both themes (var() refs resolve live). ============================================================ */ :root, [data-theme="light"], [data-theme="dark"] { /* indigo primary + link (#4c6ef5 ≈ hsl(228,89%,63%)) */ --bulma-primary-h: 228deg; --bulma-primary-s: 89%; --bulma-primary-l: 63%; --bulma-link-h: 228deg; --bulma-link-s: 89%; --bulma-link-l: 55%; /* Scheme greys derived from the fineupp surfaces: #2a2d35 ≈ hsl(224,12%,19%) */ --bulma-scheme-h: 224deg; --bulma-scheme-s: 12%; --bulma-family-primary: var(--eut-font); --bulma-body-family: var(--eut-font); --bulma-code-family: var(--eut-font-mono); --bulma-radius-small: var(--eut-radius-sm); --bulma-radius: var(--eut-radius-sm); --bulma-radius-medium: var(--eut-radius-md); --bulma-radius-large: var(--eut-radius-lg); --bulma-body-background-color: var(--eut-bg); } [data-theme="dark"] { /* lifted indigo reads better on the dark ground */ --bulma-primary-l: 66%; --bulma-link-l: 70%; /* Only hue+saturation were mapped before, so Bulma computed its OWN lightness and its native components (navbar, modal-card, dropdown, inputs) landed on a grey that did not match --eut-surface. Pin the lightness to the fineupp surfaces. */ --bulma-scheme-main-l: 19%; /* #2a2d35 — cards, navbar, modals */ --bulma-scheme-main-bis-l: 22%; --bulma-scheme-main-ter-l: 25%; --bulma-background-l: 12%; /* #1a1d23 — page ground */ --bulma-border-l: 26%; --bulma-text-l: 95%; --bulma-text-strong-l: 100%; } /* ============================================================ Legacy aliases — inline page styles still use these names (env_management/manager_templ.py); mapping them onto the tokens keeps those pages on-palette and theme-aware. ============================================================ */ :root, [data-theme="dark"] { --first-color: var(--eut-brand); --first-color-light: var(--eut-brand-soft); --title-color: var(--eut-text); --text-color: var(--eut-text-soft); --text-color-light: var(--eut-text-faint); --body-color: var(--eut-bg); --container-color: var(--eut-surface); --body-font: var(--eut-font); --header-height: var(--eut-header-height); --nav-width: var(--eut-nav-width); --z-fixed: var(--eut-z-header); }