/* Altoria Design Tokens — single source of truth. * * Extracted from the public landing-site CSS authored by the design partner. * This file is the contract between the public site and every internal * portal (cockpit, partner portal, klijent portal, admin/centrala). * * Edit ONLY this file when palette / typography / spacing changes — every * other stylesheet imports these variables and inherits automatically. * * Conventions: * --as-* → Altoria Spacing * --ar-* → Altoria Radius * --aco-* → Altoria Color (semantic) * --af-* → Altoria Font * --asd-* → Altoria Shadow * * Confirmed 2026-05-02 with Daniel + design partner. */ :root { /* ── Brand palette — emerald + dark, premium fintech ──────────────── */ --aco-green: #29B87F; /* Primary brand green — buttons, status pills, progress, charts */ --aco-green-light: #9FF5CD; /* Highlights, gradient endpoints, eyebrow labels */ --aco-green-deep: #0C5B3C; /* Brand cards, footers, deep hover backgrounds */ --aco-green-soft: rgba(41, 184, 127, 0.12); --aco-bg: #0F1612; /* Main background — deep green-black */ --aco-bg-2: #131C17; /* Slightly elevated surface */ --aco-bg-3: #182520; /* Further elevated (modals, popovers) */ /* Day-102 — pure-brand black exactly from PDF spec (Typography + Color * Guidelines 11.05.2026.). Used for public surfaces (landing, signup, * onboarding) where we want the deep brand black instead of the * slightly green-tinted internal --aco-bg. */ --aco-bg-pure: #02080D; /* RGB 2,8,13 — brand-spec deep black */ --aco-glass: rgba(20, 32, 25, 0.45); /* Frosted-card body */ --aco-glass-strong: rgba(20, 32, 25, 0.78); /* Higher-opacity glass — modals, mega-menu */ --aco-glass-border: rgba(159, 245, 205, 0.12); --aco-line: rgba(253, 254, 255, 0.08); /* Hairline dividers */ --aco-line-strong: rgba(253, 254, 255, 0.16); /* ── Text ─────────────────────────────────────────────────────────── */ --aco-text: #FDFEFF; /* Primary text on dark — pure white */ --aco-text-muted: rgba(253, 254, 255, 0.62); --aco-text-mute2: rgba(253, 254, 255, 0.42); --aco-text-on-green: #062017; /* Dark text used on bright-green buttons */ /* ── Status ──────────────────────────────────────────────────────── */ --aco-success: #29B87F; /* same as brand green */ --aco-warn: #F4C25B; --aco-warn-bg: rgba(244, 194, 91, 0.10); --aco-warn-border: rgba(244, 194, 91, 0.40); --aco-err: #FF6B6B; --aco-err-bg: rgba(255, 107, 107, 0.08); --aco-err-border: rgba(255, 107, 107, 0.40); --aco-info: #9FF5CD; --aco-info-bg: rgba(159, 245, 205, 0.10); /* ── Semantic accents for money / data states ────────────────────── * Used by counterparties saldo, insights metric strip, periods queue, * agents-hr dashboard. Single point of truth so all four pages stay * visually consistent. */ --aco-money-payable: #E76A6E; /* We owe / debit / urgent — softer than err */ --aco-money-receivable: #5EE0A8; /* They owe us / credit / good */ --aco-money-settled: var(--aco-text-mute2); --aco-money-overdue: #E0A14A; /* Amber for warnings */ /* Agent HR layer accents — emerald palette (no off-brand navy/amber/red) */ --aco-layer-1: var(--aco-green); /* Orchestrator — top */ --aco-layer-1-bg: rgba(41, 184, 127, 0.18); --aco-layer-2: var(--aco-green-light); /* Domain agents — middle */ --aco-layer-2-bg: rgba(159, 245, 205, 0.12); --aco-layer-3: rgba(159, 245, 205, 0.55); /* Tools — leaf nodes, dimmer */ --aco-layer-3-bg: rgba(255, 255, 255, 0.04); /* Status dots used on org chart + periods + cards */ --aco-status-active: #10B981; --aco-status-idle: #E0A14A; --aco-status-off_duty: rgba(253, 254, 255, 0.32); --aco-status-never_seen: rgba(253, 254, 255, 0.18); /* ── Typography ───────────────────────────────────────────────────── */ /* Day-102 — design-partner spec from "Altoria Typography + Color * Guidelines" (11.05.2026.): primary heading font is Radeny (C1) or * Nordeco (C2); body is Poppins. Both Radeny + Nordeco are licensed * commercial faces self-hosted via @font-face in brand-fonts.css once * we drop the .woff2 files; Urbanist / Inter remain as resilient * fallbacks so layout never collapses if the brand fonts fail to load. */ --af-display: "Radeny", "Nordeco", "Urbanist", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --af-body: "Poppins", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --af-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; --af-tight: -0.015em; /* heading letter-spacing */ --af-tighter: -0.025em; /* h1 letter-spacing */ /* ── Radii ────────────────────────────────────────────────────────── */ --ar-xs: 6px; --ar-sm: 10px; --ar: 14px; --ar-lg: 20px; --ar-xl: 24px; --ar-pill: 999px; /* ── Spacing scale (8-pt grid) ───────────────────────────────────── */ --as-1: 4px; --as-2: 8px; --as-3: 12px; --as-4: 16px; --as-5: 20px; --as-6: 24px; --as-8: 32px; --as-10: 40px; --as-12: 48px; --as-16: 64px; --as-20: 80px; /* ── Shadows — soft, with green hint ──────────────────────────────── */ --asd-card: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); --asd-card-lg: 0 20px 50px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04); --asd-hover: 0 26px 60px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(41, 184, 127, 0.6), 0 0 40px rgba(41, 184, 127, 0.35), 0 0 80px rgba(41, 184, 127, 0.15); --asd-glow: 0 0 6px rgba(41, 184, 127, 0.6); /* ── Misc ─────────────────────────────────────────────────────────── */ --maxw: 1280px; --transition-fast: 150ms cubic-bezier(0.2, 0.8, 0.2, 1); --transition-medium: 300ms cubic-bezier(0.2, 0.8, 0.2, 1); --transition-slow: 450ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ── Backwards-compat aliases ────────────────────────────────────────── * Keep the legacy variable names working while we migrate the existing * stylesheet incrementally. Once every rule references --aco-* directly, * delete this block. */ :root { --bg: var(--aco-bg); --bg-2: var(--aco-bg-2); --panel: var(--aco-bg-2); --panel-2: var(--aco-bg-3); --border: var(--aco-glass-border); --border-2: var(--aco-line-strong); --text: var(--aco-text); --text-dim: var(--aco-text-muted); --text-mute: var(--aco-text-mute2); --mint: var(--aco-green); --mint-2: var(--aco-green-light); --mint-dim: var(--aco-green-deep); --warn: var(--aco-warn); --err: var(--aco-err); --ok: var(--aco-green); --shadow: var(--asd-card); --r-sm: var(--ar-xs); --r: var(--ar-sm); --r-lg: var(--ar); --mono: var(--af-mono); --sans: var(--af-body); } /* ── Theme variants ──────────────────────────────────────────────────── * * Selectable from /settings · Display. Persisted in `cockpit_theme` * cookie. Applied via `` attribute set in the * layout templates from the cookie value. * * Token-only — no rule outside this file should hardcode a theme color. * Switching themes is instantaneous (no reload) once the cookie is set. * * Four canonical themes (see docs/UI-PORTALS-DESIGN.md §4): * * black — current default; deep green-black, glassmorphic * dark-green — slightly more green-tinted, warmer * emerald — heaviest brand green; most "Altoria-feel" * light — white/cream body, dark green text + accents */ /* ── black-standard (default :root) ───────────────────────────────── * Mockup: pure neutral black, no green tint, deep shadows. Cards lift * on a near-#050807 body. Accent green is the only color you see. * Override the :root defaults so [data-theme="black"] is unambiguous * even if the cookie is explicitly set. */ [data-theme="black"] { --aco-bg: #050807; --aco-bg-2: #0C100E; --aco-bg-3: #131816; --aco-glass: rgba(12, 16, 14, 0.55); --aco-glass-strong: rgba(12, 16, 14, 0.85); --aco-glass-border: rgba(255, 255, 255, 0.08); --aco-line: rgba(255, 255, 255, 0.06); --aco-line-strong: rgba(255, 255, 255, 0.12); } /* ── dark-green (= partner_green-dark-altoria mockup) ───────────── * DEEP, MUTED forest. Body sits well below emerald in lightness so * the two themes never feel interchangeable. Cards still elevate * but with subtle warmth, not glow. */ [data-theme="dark-green"] { --aco-bg: #07251B; /* significantly deeper than emerald */ --aco-bg-2: #0D2F23; --aco-bg-3: #133B2D; --aco-glass: rgba(13, 47, 35, 0.70); --aco-glass-strong: rgba(13, 47, 35, 0.92); --aco-glass-border: rgba(159, 245, 205, 0.14); --aco-line: rgba(159, 245, 205, 0.07); --aco-line-strong: rgba(159, 245, 205, 0.18); --aco-green-soft: rgba(41, 184, 127, 0.16); } /* ── emerald (= partner_green-light-altoria mockup) ─────────────── * BRIGHT, vibrant forest. Body sits noticeably ABOVE dark-green so * the two are obviously distinct at a glance. Borders + charts * tuned brighter; brand green pumped by ~15% saturation for the * "Altoria signature" feel. */ [data-theme="emerald"] { --aco-bg: #144D3A; /* much brighter than dark-green */ --aco-bg-2: #1A5B45; --aco-bg-3: #226A52; --aco-glass: rgba(26, 91, 69, 0.72); --aco-glass-strong: rgba(26, 91, 69, 0.94); --aco-glass-border: rgba(94, 224, 168, 0.32); --aco-line: rgba(94, 224, 168, 0.12); --aco-line-strong: rgba(94, 224, 168, 0.28); --aco-green: #34D693; --aco-green-light: #B2F8DA; --aco-green-soft: rgba(52, 214, 147, 0.24); } [data-theme="light"] { /* Body + cards — Day 75A: softened from #F4F7F5 (still essentially * white) to #ECF1EE (warm emerald-tinged off-white). Cards are now * #F8FBF9 instead of #FFFFFF — still lighter than body so they * separate, but no harsh pure-white glare. Keeps the Altoria * emerald-cream palette readable for long sessions. */ --aco-bg: #ECF1EE; /* was #F4F7F5 — softer body */ --aco-bg-2: #F8FBF9; /* was #FFFFFF — warm off-white cards */ --aco-bg-3: #DFE8E2; /* was #EBF1ED — slightly deeper for depth */ --aco-glass: rgba(248, 251, 249, 0.92); --aco-glass-strong: rgba(248, 251, 249, 0.98); --aco-glass-border: rgba(12, 91, 60, 0.12); --aco-line: rgba(12, 91, 60, 0.08); --aco-line-strong: rgba(12, 91, 60, 0.16); /* Text — dark on light. Bump muted darker for legibility (mockup * uses an actual grey, not a low-opacity emerald). */ --aco-text: #062017; --aco-text-muted: rgba(6, 32, 23, 0.74); /* was 0.62 — darker */ --aco-text-mute2: rgba(6, 32, 23, 0.52); /* was 0.42 — darker */ --aco-text-on-green: #062017; /* Semantic accents need slightly darker fills for contrast on white. */ --aco-money-payable: #B8302F; --aco-money-receivable: #117045; --aco-money-overdue: #BD7800; --aco-money-settled: rgba(6, 32, 23, 0.42); --aco-warn: #BD7800; --aco-err: #B8302F; --aco-info: #0C5B3C; /* Layer cards — keep the same green logic but brighter base */ --aco-layer-1: var(--aco-green-deep); --aco-layer-1-bg: rgba(41, 184, 127, 0.16); --aco-layer-2: var(--aco-green); --aco-layer-2-bg: rgba(41, 184, 127, 0.08); --aco-layer-3: rgba(6, 32, 23, 0.55); --aco-layer-3-bg: rgba(6, 32, 23, 0.04); /* Status dots */ --aco-status-active: var(--aco-green); --aco-status-idle: #BD7800; --aco-status-off_duty: rgba(6, 32, 23, 0.32); --aco-status-never_seen: rgba(6, 32, 23, 0.18); /* Soft shadow replaces the dark-mode emerald glow. */ --asd-card: 0 1px 3px rgba(12, 91, 60, 0.08); --asd-strong: 0 8px 28px rgba(12, 91, 60, 0.10); --asd-glow: 0 0 6px rgba(41, 184, 127, 0.45); } /* Light-theme component adjustments — backdrop-filter looks bad on * white, and we need real shadows to give cards definition without the * glass border glow. */ [data-theme="light"] .topbar-shell, [data-theme="light"] .portal-sidebar, [data-theme="light"] .portal-topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(248, 251, 249, 0.96); /* Day 75A — softer */ box-shadow: 0 1px 3px rgba(12, 91, 60, 0.08); } [data-theme="light"] .card, [data-theme="light"] .portal-card, [data-theme="light"] .kpi-tile, [data-theme="light"] .worker-card { box-shadow: 0 1px 3px rgba(12, 91, 60, 0.06); border-color: rgba(12, 91, 60, 0.10); } [data-theme="light"] .card:hover, [data-theme="light"] .kpi-tile:hover, [data-theme="light"] .worker-card:hover { box-shadow: 0 4px 12px rgba(41, 184, 127, 0.20); border-color: rgba(41, 184, 127, 0.40); } /* Ambient orbs are a dark-mode flourish — hide on light. */ [data-theme="light"] .ambient, [data-theme="light"] .grain { display: none; } /* Code/mono text is harder to read on white in the muted palette */ [data-theme="light"] .mono, [data-theme="light"] .code { color: rgba(6, 32, 23, 0.78); }