/* v4-tokens.css — V4 light-cyan-glass aesthetic, applied SaaS-wide. * * Source palette: login-v4.css (locked, 2026-05-19). This file extracts the * V4 tokens — two-tone cyan accent, frosted-glass surfaces, breathing halos, * Space Grotesk display + Inter body, 12-radius gradient buttons — and * applies them to every page rendering `_base.html` when `data-theme="light"`. * * Strategy: ADDITIVE only. Loads AFTER base.css + components.css + * v3-foundation.css so the V4 overrides win by source order at equal * specificity. Existing classnames (`.card`, `.eyebrow`, `.btn`, `.list`, * `.kpi`, `.nav-pill`) keep their structure — only colour, glass, gradient, * radius, and motion change. * * Hook points: * :root[data-theme="light"] body — page background + halos * :root[data-theme="light"] .topbar — frosted glass + V4 nav * :root[data-theme="light"] .content .card — glass card surface * :root[data-theme="light"] .content .eyebrow — V4 eyebrow chip * :root[data-theme="light"] .btn--primary — V4 gradient button * :root[data-theme="light"] .kpi — glass KPI tile * :root[data-theme="light"] .nav-pill — glass status pill * :root[data-theme="light"] input, select, textarea — V4 form inputs * * Scope: only `:root[data-theme="light"]` and not `.lp-v4` (login is locked * to its own internal cascade — touching it from here would break the * brand-locked sign-in surface). * * 2026-05-20 — initial saas-rollout, take 2 (Captain-directed). */ /* ============================================================ LIGHT-MODE V4 TOKEN OVERRIDES Override base.css's :root[data-theme="light"] block so the SaaS chrome paints in the V4 two-tone cyan rather than the muted #008C9E from the H1 fix. Contrast is preserved (5.22:1 against white for text uses via --accent-text). ============================================================ */ :root[data-theme="light"] { --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* V4 two-tone cyan (WCAG AA verified — see login-v4.css comments) */ --accent: #0099B0; /* primary fill / dots / borders */ --accent-text: #007885; /* text on white — 5.22:1 (AA-all-text) */ --accent-vivid: #00B5D1; /* button gradient top */ --accent-bright: #00D4FF; /* decorative glow only */ --accent-dim: #007885; --accent-soft: #2A9FB4; --accent-glow: rgba(0, 153, 176, 0.10); --accent-glow-2: rgba(0, 153, 176, 0.20); --accent-glow-bright: rgba(0, 212, 255, 0.22); /* Glass surfaces — frosted, like login-v4 card */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-hover: rgba(255, 255, 255, 0.86); --glass-border: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.5)); --glass-border-hi: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, 0.8)); --glass-blur: saturate(160%) blur(14px); --glass-shadow: 0 6px 20px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent); --glass-shadow-hi: 0 14px 44px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); /* Brighter, animated halos */ --halo-1: radial-gradient(ellipse 70% 45% at 15% 0%, color-mix(in srgb, var(--accent-bright) 10%, transparent), transparent 60%); --halo-2: radial-gradient(ellipse 50% 40% at 90% 75%, color-mix(in srgb, var(--accent-vivid) 8%, transparent), transparent 60%); /* Soft drop-shadow for cards (lighter than dark theme) */ --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); } /* ============================================================ BODY HALOS — breathing, 22s drift (login-v4 detail #1) Skip on routes that opt out via `` so any page that doesn't want it can disable cleanly. ============================================================ */ :root[data-theme="light"] body::before { background: var(--halo-1), var(--halo-2); animation: v4-breathe 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; will-change: opacity, transform; } @keyframes v4-breathe { 0%, 100% { opacity: 0.85; transform: scale(1) translate(0, 0); } 50% { opacity: 1; transform: scale(1.04) translate(1%, -0.6%); } } /* ============================================================ TOPBAR — V4 frosted glass with cyan tint ============================================================ */ :root[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(170%) blur(16px); -webkit-backdrop-filter: saturate(170%) blur(16px); border-bottom: 1px solid var(--glass-border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 14px rgba(0, 153, 176, 0.06); } :root[data-theme="light"] .brand { font-family: var(--font-display); letter-spacing: -0.005em; } :root[data-theme="light"] .brand__name { color: var(--text); } :root[data-theme="light"] .brand__name .accent { color: var(--accent-text); } :root[data-theme="light"] .topbar__nav .topnav-item { color: var(--text-dim); font-family: var(--font-display); } :root[data-theme="light"] .topbar__nav .topnav-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); } :root[data-theme="light"] .topbar__nav .topnav-item.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); } /* Theme toggle — keep readable */ :root[data-theme="light"] .theme-toggle { border-color: var(--glass-border); color: var(--text-dim); } :root[data-theme="light"] .theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* Ask Niki trigger — translate to V4 chip */ :root[data-theme="light"] .niki-trigger { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } :root[data-theme="light"] .niki-trigger:hover { border-color: var(--accent); background: var(--glass-bg-hover); color: var(--accent-text); } /* View-switcher select */ :root[data-theme="light"] .view-switcher__select, :root[data-theme="light"] .role-switcher__select { background: var(--glass-bg); border-color: var(--glass-border); color: var(--text); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } :root[data-theme="light"] .view-switcher__select:hover, :root[data-theme="light"] .role-switcher__select:hover { border-color: var(--accent); } /* Mobile drawer — frosted light */ :root[data-theme="light"] .topbar__drawer { background: rgba(255, 255, 255, 0.95); border-top-color: var(--glass-border); } :root[data-theme="light"] .topbar__burger { border-color: var(--glass-border); } :root[data-theme="light"] .topbar__burger-bar { background: var(--text); } :root[data-theme="light"] .topbar__burger:hover { border-color: var(--accent); } /* ============================================================ CONTENT TYPOGRAPHY — V4 display headings ============================================================ */ :root[data-theme="light"] .content h1, :root[data-theme="light"] .content h2, :root[data-theme="light"] .content h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; } :root[data-theme="light"] .content h1 { color: var(--text); line-height: 1.12; } :root[data-theme="light"] .content h2 { color: var(--text); font-weight: 600; } :root[data-theme="light"] .content h1 .accent, :root[data-theme="light"] .content h2 .accent, :root[data-theme="light"] .content .hero-greeting__title .accent { color: var(--accent-text); } /* Body links — V4 cyan, AA */ :root[data-theme="light"] a { color: var(--accent-text); } :root[data-theme="light"] a:hover { color: var(--accent); } /* ============================================================ CARDS — frosted glass with cyan rim ============================================================ */ :root[data-theme="light"] .content .card, :root[data-theme="light"] .card { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transition: box-shadow 360ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 360ms cubic-bezier(0.22, 0.61, 0.36, 1); } :root[data-theme="light"] .content .card:hover, :root[data-theme="light"] .card:hover { border-color: var(--glass-border-hi); } :root[data-theme="light"] .content .card:focus-within, :root[data-theme="light"] .card:focus-within { border-color: var(--glass-border-hi); box-shadow: var(--glass-shadow-hi); } /* Soft cyan top-rim — login-v4 signature */ :root[data-theme="light"] .content .card::before, :root[data-theme="light"] .card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-bright) 50%, transparent 100%); opacity: 0.5; pointer-events: none; } :root[data-theme="light"] .card__title { font-family: var(--font-display); font-weight: 600; color: var(--text); } :root[data-theme="light"] .card__sub { color: var(--text-dim); } /* Card--accent — emphasised top rim */ :root[data-theme="light"] .card--accent { border-color: var(--glass-border-hi); } :root[data-theme="light"] .card--accent::before { opacity: 1; } /* ============================================================ EYEBROW — V4 pill chip with two-tone gradient ============================================================ */ :root[data-theme="light"] .content .eyebrow, :root[data-theme="light"] .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: linear-gradient(95deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, color-mix(in srgb, var(--accent-bright) 14%, transparent) 100%); color: var(--accent-text); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); } :root[data-theme="light"] .content .eyebrow::before, :root[data-theme="light"] .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow-bright); flex-shrink: 0; } /* ============================================================ BUTTONS — V4 gradient primary (login-v4 detail) ============================================================ */ :root[data-theme="light"] .btn--primary { background: linear-gradient(180deg, var(--accent-vivid) 0%, var(--accent) 55%, var(--accent-text) 100%); color: #fff; border: 1px solid color-mix(in srgb, var(--accent-text) 45%, transparent); border-radius: var(--radius-btn, 12px); font-family: var(--font-body); font-weight: 600; letter-spacing: -0.005em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--accent-text) 50%, transparent); transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 200ms ease; } :root[data-theme="light"] .btn--primary:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 8px 24px color-mix(in srgb, var(--accent-bright) 30%, transparent), 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--accent-text) 60%, transparent); } :root[data-theme="light"] .btn--primary:active { transform: translateY(0); filter: brightness(0.95); } /* Secondary / ghost — keep glass treatment */ :root[data-theme="light"] .btn { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text); border-radius: var(--radius-btn, 12px); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; } :root[data-theme="light"] .btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--glass-bg-hover); } :root[data-theme="light"] .btn--ghost { background: transparent; } :root[data-theme="light"] .btn--ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent-text); } :root[data-theme="light"] .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow-2), 0 0 0 1px var(--accent-text); } /* ============================================================ KPIs — frosted glass tiles ============================================================ */ :root[data-theme="light"] .kpi { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); position: relative; overflow: hidden; transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1), border-color 220ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 240ms cubic-bezier(0.22, 0.61, 0.36, 1); } :root[data-theme="light"] .kpi:hover { border-color: var(--glass-border-hi); transform: translateY(-1px); box-shadow: var(--glass-shadow-hi); } :root[data-theme="light"] .kpi::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-bright) 50%, transparent 100%); opacity: 0.55; pointer-events: none; } :root[data-theme="light"] .kpi__label { font-family: var(--font-display); color: var(--text-muted); font-weight: 500; } :root[data-theme="light"] .kpi__value { font-family: var(--font-display); font-weight: 600; color: var(--text); } :root[data-theme="light"] .kpi__delta.up { color: var(--green); } :root[data-theme="light"] .kpi__delta.down { color: var(--red); } /* KPI-mini variant (used on dashboard) */ :root[data-theme="light"] .kpi-mini { background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--radius-card); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); } :root[data-theme="light"] .kpi-mini__label { color: var(--text-muted); font-family: var(--font-display); } :root[data-theme="light"] .kpi-mini__value { color: var(--text); font-family: var(--font-display); } /* ============================================================ PILLS — V4 glass pill ============================================================ */ :root[data-theme="light"] .nav-pill { background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-dim); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } :root[data-theme="light"] .nav-pill--accent { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } :root[data-theme="light"] .nav-pill--live { background: color-mix(in srgb, var(--green) 12%, var(--bg-card)); color: var(--green); border-color: color-mix(in srgb, var(--green) 38%, transparent); } :root[data-theme="light"] .nav-pill--warn { background: color-mix(in srgb, var(--amber) 12%, var(--bg-card)); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 38%, transparent); } :root[data-theme="light"] .nav-pill--danger { background: color-mix(in srgb, var(--red) 12%, var(--bg-card)); color: var(--red); border-color: color-mix(in srgb, var(--red) 38%, transparent); } /* ============================================================ LIST ROWS — soft hover, frosted divider ============================================================ */ :root[data-theme="light"] .list__row { border-bottom-color: color-mix(in srgb, var(--accent) 8%, var(--border)); transition: background 180ms ease, padding-left 220ms ease; } :root[data-theme="light"] .list__row:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); padding-left: calc(var(--row-px, 1rem) + 6px); } /* ============================================================ FORMS — V4 inputs ============================================================ */ :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="number"], :root[data-theme="light"] input[type="password"], :root[data-theme="light"] input[type="search"], :root[data-theme="light"] input[type="tel"], :root[data-theme="light"] input[type="date"], :root[data-theme="light"] input[type="time"], :root[data-theme="light"] textarea, :root[data-theme="light"] select { background: var(--bg-card-hi); border: 1px solid var(--border-hi); border-radius: var(--radius-input); color: var(--text); font-family: var(--font-body); transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } :root[data-theme="light"] input[type="text"]:hover, :root[data-theme="light"] input[type="email"]:hover, :root[data-theme="light"] input[type="search"]:hover, :root[data-theme="light"] input[type="password"]:hover, :root[data-theme="light"] textarea:hover, :root[data-theme="light"] select:hover { border-color: var(--accent-soft); background: var(--bg-card); } :root[data-theme="light"] input[type="text"]:focus, :root[data-theme="light"] input[type="email"]:focus, :root[data-theme="light"] input[type="search"]:focus, :root[data-theme="light"] input[type="password"]:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] select:focus { outline: none; background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow-2), 0 0 0 1px var(--accent), 0 0 16px color-mix(in srgb, var(--accent-bright) 18%, transparent); } /* ============================================================ TABLES — V4 soft borders + frosted header ============================================================ */ :root[data-theme="light"] table.list, :root[data-theme="light"] .card table { border-collapse: collapse; width: 100%; } :root[data-theme="light"] table.list thead th, :root[data-theme="light"] .card table thead th { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 0.65rem 0.85rem; text-align: left; background: color-mix(in srgb, var(--accent) 5%, transparent); border-bottom: 1px solid var(--glass-border); } :root[data-theme="light"] table.list tbody td, :root[data-theme="light"] .card table tbody td { padding: 0.75rem 0.85rem; border-bottom: 1px solid color-mix(in srgb, var(--accent) 8%, var(--border)); vertical-align: top; color: var(--text); } :root[data-theme="light"] table.list tbody tr:hover, :root[data-theme="light"] .card table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } /* ============================================================ FOCUS RINGS — universal AA-grade ring ============================================================ */ :root[data-theme="light"] a:focus-visible, :root[data-theme="light"] button:focus-visible:not(.btn--primary), :root[data-theme="light"] .topnav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow-2), 0 0 0 1px var(--accent-text); border-radius: 6px; } /* ============================================================ MOBILE (≤540px) — phone-first courtesy ============================================================ */ @media (max-width: 540px) { :root[data-theme="light"] .content { padding: 1.1rem 0.95rem 1.5rem; } :root[data-theme="light"] .content .card, :root[data-theme="light"] .card { border-radius: 18px; } :root[data-theme="light"] .content h1 { font-size: 1.5rem; } :root[data-theme="light"] .kpi-strip { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; } :root[data-theme="light"] .kpi-strip::-webkit-scrollbar { display: none; } /* Wide tables (staff roster, dashboard splits) — let users swipe them instead of overflowing the viewport. Card already clips overflow via border-radius so this only affects the table itself. */ :root[data-theme="light"] .card table.list, :root[data-theme="light"] .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } :root[data-theme="light"] .card table.list thead th, :root[data-theme="light"] .card table thead th, :root[data-theme="light"] .card table.list tbody td, :root[data-theme="light"] .card table tbody td { white-space: normal; } } /* ============================================================ REDUCED MOTION — honour user pref ============================================================ */ @media (prefers-reduced-motion: reduce) { :root[data-theme="light"] body::before { animation: none; } :root[data-theme="light"] .card, :root[data-theme="light"] .kpi, :root[data-theme="light"] .btn, :root[data-theme="light"] .btn--primary, :root[data-theme="light"] .list__row, :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { transition: none; } :root[data-theme="light"] .btn--primary:hover, :root[data-theme="light"] .kpi:hover, :root[data-theme="light"] .list__row:hover { transform: none; padding-left: var(--row-px, 1rem); } } /* ============================================================ DON'T BLEED INTO LOGIN — .lp-v4 has its own self-contained cascade. Anything inside .lp-v4 should NOT be overridden by the rules above. Login is locked. ============================================================ */ :root[data-theme="light"] .lp-v4 a, :root[data-theme="light"] .lp-v4 .btn, :root[data-theme="light"] .lp-v4 input, :root[data-theme="light"] .lp-v4 select { /* deliberately empty — .lp-v4 internal rules win by being later in source order within login-v4.css; we just declare intent. */ }