/* ============================================================================ * EPAL GROUP ERP · css/tokens.css * ---------------------------------------------------------------------------- * DESIGN TOKENS — the single source of truth for the visual language. * * Aesthetic direction: "Private Office" — a calm, expensive, command-center * feel. Deep navy canvas, platinum text, a restrained gold accent, and a * per-company accent colour injected at runtime via --accent. * * Two themes (dark = default, light) driven by [data-theme] on . * Every colour, radius, shadow, and easing lives here so the whole system can * be re-skinned by editing ONE file. * ==========================================================================*/ /* REAL COUNTRY FLAGS on every OS. Chromium on Windows ships NO country-flag glyphs, so 🇳🇵/🇸🇬 degrade to bare "NP"/"SG" letters. This bundled Twemoji flags subset (~78 KB, self-hosted — no external host, honours the free/static rule) provides them. `unicode-range` scopes the font to ONLY the regional-indicator codepoints, so it is used for flags and NOTHING else — every other character falls through to the real UI fonts, and browsers with native flags simply ignore it. Prefixed onto the font stacks below so any flag emoji anywhere renders as a proper flag image. */ @font-face { font-family: 'Twemoji Country Flags'; src: url('../fonts/TwemojiCountryFlags.woff2') format('woff2'); unicode-range: U+1F1E6-1F1FF; font-display: swap; } :root { /* Typography ------------------------------------------------------------*/ --font-sans: 'Twemoji Country Flags', 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Twemoji Country Flags', 'Sora', 'Plus Jakarta Sans', var(--font-sans); --font-mono: 'Twemoji Country Flags', 'JetBrains Mono', 'DM Mono', ui-monospace, 'SF Mono', monospace; /* TYPE SCALE — 8 steps, and only these 8 (owner review 2026-07-15). The scale had sprawled to 15 rendered sizes (10.5 · 11 · 11.5 · 12 · 12.5 · 13 · 13.5 · 14 · 15 · 16.4 · 19 · 21 · 24 · 32): near-duplicates nobody can tell apart, which is what made pages read "unresolved". Every TEXT size in the app now resolves to one of these tokens — no raw px in a rule that sets text. The ratio is ~1.10 at the small end (where legibility, not drama, is the job) opening to ~1.25 at the display end. NOT on this scale, deliberately: · icon glyph sizes (.icon-btn i, .kpi-ico, .empty-state i) — an icon's font-size is a box metric, not type. See the house 24px icon rule. · print/document stylesheets (deepcore.css, the print windows built in view.js) — a separate medium with its own scale. · the 404 .err-code hero (96px) — a one-off by design. Nothing here is below 11px: 10.5px uppercase + letter-spaced + muted was four legibility taxes stacked (309 elements were under 11px). */ --fs-micro: 11px; /* badges, kbd, chart ticks — the floor, never go under */ --fs-tiny: 12px; /* table headers, KPI labels, form labels, hints */ --fs-small: 13px; /* table body, buttons, chips — the dense-UI workhorse */ --fs-body: 14px; /* base body copy (matches ) */ --fs-lead: 16px; /* card titles, lead paragraphs */ --fs-h3: 20px; /* stat values, compact-strip KPI values */ --fs-h2: 24px; /* page titles */ --fs-h1: 32px; /* the hero KPI number */ /* Brand accents (also declared in config.js per company) ---------------*/ --gold: #1A43BF; --gold-soft: #7E9AE8; /* EPAL dark-blue palette (the owner's swatches) — used for the luxurious, jewel-like surfaces (deep gradient chips, ink accents). */ --epal-abyss: #00072D; --epal-navy: #051650; --epal-deep: #0A2472; --epal-royal: #123499; --epal-accent:#1A43BF; --epal-soft: #7E9AE8; --brand-travels: #2f6bff; --brand-woodart: #6f9c1c; --brand-it: #7b5cff; --brand-shop: #e0356e; --brand-construction: #e2721b; /* Semantic status -------------------------------------------------------*/ --good: #23c17e; --good-soft: rgba(35,193,126,.14); --warn: #f4b740; --warn-soft: rgba(244,183,64,.14); --bad: #f0506e; --bad-soft: rgba(240,80,110,.14); --info: #3b82f6; --info-soft: rgba(59,130,246,.14); /* Runtime accent (router sets this per company) ------------------------*/ --accent: var(--gold); /* Radii -----------------------------------------------------------------*/ --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Motion ----------------------------------------------------------------*/ --e-out: cubic-bezier(.16,.84,.44,1); --e-inout: cubic-bezier(.65,.05,.36,1); --t-fast: .14s; --t: .24s; --t-slow: .4s; /* Layout metrics --------------------------------------------------------*/ --rail-w: 68px; --sidebar-w: 268px; --topbar-h: 62px; --content-max: 1600px; } /* ============================ DARK (default) ============================= */ :root, [data-theme="dark"] { --bg: #03071c; --bg-2: #060c26; --surface: #0a1330; --surface-2: #0f1a3d; --surface-3: #17234f; --surface-hi:#1f2d5e; --border: rgba(142,168,240,.12); --border-strong: rgba(150,178,245,.22); --border-accent: color-mix(in srgb, var(--accent) 55%, transparent); --hairline: rgba(200,218,255,.09); /* beveled top-edge light on panels */ /* Outer card border on hover — a violet lift (owner 2026-07-19). */ --card-hover: #7c5cff; --text: #eaeefb; --text-dim: #aeb8d0; /* owner 2026-07-15: secondary text +20% visibility */ --text-mute: #808aa2; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 1px 1px rgba(0,0,0,.4), 0 16px 36px -14px rgba(0,4,20,.66); --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 44px 84px -28px rgba(0,4,24,.78); /* Layered "resting" shadow for cards — several faint navy-tinted layers stacked (contact + ambient), never one hard black drop. THE premium depth cue. */ --shadow-card: 0 1px 2px rgba(0,2,14,.5), 0 6px 16px -6px rgba(0,4,24,.5), 0 20px 44px -18px rgba(0,4,24,.62); --glow: 0 0 0 1px var(--border-accent), 0 10px 40px -12px color-mix(in srgb, var(--accent) 55%, transparent); --glass: color-mix(in srgb, var(--surface) 72%, transparent); --glass-brd: rgba(255,255,255,.08); --grid-line: rgba(255,255,255,.045); --scrim: rgba(3,6,12,.66); color-scheme: dark; } /* =============================== LIGHT =================================== */ [data-theme="light"] { --bg: #e8edf6; /* cool pearl, never pure white — lets white cards lift */ --bg-2: #dde5f1; --surface: #ffffff; --surface-2: #f6f8fd; --surface-3: #eef2f9; --surface-hi:#e5ebf6; --border: rgba(26,67,191,.12); --border-strong: rgba(26,67,191,.22); --border-accent: color-mix(in srgb, var(--accent) 42%, transparent); --hairline: rgba(255,255,255,.7); /* crisp top edge on white panels */ --text: #131a2c; --text-dim: #454f68; /* owner 2026-07-15: secondary text +20% visibility. Measures 6.9:1 on --bg — already clears the floor. */ /* Was #6d758a, which measured 3.9:1 on --bg and 4.3:1 on --surface-2 — under the 4.5:1 floor for normal text (dark theme was already fine at 5.8/4.9, so this is a light-only correction). Darkened along the SAME hue (222°) so it stays the same cool slate, just legible. Now measures: 5.1:1 on --bg (#e8edf6) · 5.7:1 on --surface-2 · 6.0:1 on --surface 4.7:1 on --bg-2 (#dde5f1), the darkest light surface — worst case. */ --text-mute: #5a6379; --shadow-sm: 0 1px 2px rgba(5,22,80,.07); --shadow: 0 2px 4px rgba(5,22,80,.05), 0 20px 42px -18px rgba(5,22,80,.18); --shadow-lg: 0 4px 10px rgba(5,22,80,.07), 0 44px 84px -30px rgba(5,22,80,.24); /* Layered "resting" shadow — faint navy-tinted contact + ambient layers. */ --shadow-card: 0 1px 2px rgba(5,22,80,.05), 0 5px 14px -4px rgba(5,22,80,.08), 0 20px 40px -16px rgba(5,22,80,.14); --glow: 0 0 0 1px var(--border-accent), 0 12px 40px -14px color-mix(in srgb, var(--accent) 50%, transparent); --glass: color-mix(in srgb, #ffffff 78%, transparent); --glass-brd: rgba(16,26,48,.08); --grid-line: rgba(16,26,48,.05); --scrim: rgba(20,30,60,.35); color-scheme: light; } /* Company accent helper classes (used by rail + theming) ----------------- */ [data-co="group"] { --accent: var(--gold); } [data-co="travels"] { --accent: var(--brand-travels); } [data-co="woodart"] { --accent: var(--brand-woodart); } [data-co="it"] { --accent: var(--brand-it); } [data-co="shop"] { --accent: var(--brand-shop); } [data-co="construction"] { --accent: var(--brand-construction); }