/* ===================================================================== BALEN -- Comfort UI tokens (canonical color / type / shape SSoT) ===================================================================== Loaded FIRST, before all other stylesheets (see app.html ). Owns every design token for the Comfort migration. After P0, no hex literal is permitted anywhere outside this file (and the sanctioned login / marketing hero gradient). P0 ZERO-DIFF DEVIATION (D-P0-1): three tokens were intentionally DEFERRED (commented out) because live code already consumes them via var(--name, ); defining them then would have changed pixels on screens not yet migrated, breaking P0's zero-diff contract. P2a status: --accent INTRODUCED in P2a (accent unification). #0E9C8E light / #2FD0C0 dark. Clears the 3:1 fill/large bar; for body-size interactive TEXT use --accent-text. --accent-text ADDED in P2a (F-P2-1): AA-safe interactive text teal, #0B7A6F light (5.21 on --surface / 4.80 on --page) / #2FD0C0 dark (8.54 on --surface). Links/labels/small interactive glyphs use this; fills use --accent. --status-confirmed INTRODUCED in P2a (= var(--accent)); zero consumers yet. --surface-2 DEFINED (P4 calendar): light #FBF6F0 (== the value inbox.js already falls back to via var(--surface-2, #FBF6F0), so those financial preview panels render unchanged in light) / dark #121A18. Consumed by the calendar (.cal-nav:hover, .cal-day.other-month) and the inbox preview panels. All other tokens are either unconsumed today or overridden by an existing later same-name definition (e.g. app.html --r-lg:16px wins over the 12px below), so they render a zero visual diff. ===================================================================== */ :root { /* light / day */ --page:#F4F6F5; --surface:#FFFFFF; --surface-2:#FBF6F0; --text-primary:#16201E; --text-secondary:#5C6B68; --text-tertiary:#8A9893; /* --accent: fills/large (3:1). --accent-text: body interactive text (AA, F-P2-1). P2a. */ --accent:#0E9C8E; --accent-text:#0B7A6F; --accent-tint:#E4F4F1; --accent-on:#FFFFFF; /* --accent-on-strong: AA label for SMALL text ON an --accent fill (F-P2-3, Codex P2a). */ /* Dark in BOTH modes (the --accent fill is a light teal in both): 4.61:1 on #0E9C8E light, */ /* 8.15:1 on #2FD0C0 dark. Self-contained, defined once like --header-on/--cat-on. */ /* (--accent-on #FFF stays for LARGE/graphical fills, which clear the 3:1 bar.) */ --accent-on-strong:#082823; /* Translucent teal derivatives (P2b-2): focus-ring glow + soft interactive border. */ /* + --accent-soft (P3a-4): soft teal container tint behind financial reconciliation panels. */ /* = --accent rgb at low alpha; overlays, so no text-contrast bar applies. */ --accent-glow:rgba(14,156,142,.18); --accent-border:rgba(14,156,142,.22); --accent-soft:rgba(14,156,142,.06); --header:#0C5A63; /* On-header text (P1b, F-P1-1). AA-safe on --header in BOTH modes (light #0C5A63 / */ /* dark #0A2E2A): --header-on 7.90:1, --header-on-2 5.27:1 light / 9.75:1 dark. Self- */ /* contained (opaque), so defined once here like --cat-*. */ --header-on:#FFFFFF; --header-on-2:#C2D7D9; /* FIGURE SIGN TOKENS (P3b-token, foundational mapping -- decision only, ZERO consumer here). */ /* REVISED after Codex FAIL @ f51b038, which rejected a blanket 3:1 rule for normal/small figure TEXT. */ /* --pos-text / --neg-text = normal/small money/hour/balance/total figure TEXT -- AA body >=4.5 BOTH bgs: */ /* light #177A4A / #C0392B: --pos-text 5.36 on --surface / 4.94 on --page; --neg-text 5.44 / 5.01. */ /* dark #4CC38A / #F2716C: --pos-text 7.43 on --surface / 8.35 on --page; --neg-text 5.76 / 6.48. */ /* --pos / --neg = LARGE text / graphical reinforcement / borders / icons / emphasis ONLY (>=3:1, proof attached). */ /* P3b sub-phases (NOT this step) migrate consumers: app --positive->--pos-text, --negative->--neg-text; figure */ /* TEXT --green->--pos-text, --coral->--neg-text (chrome/status --green/--coral stay); hero -> P3b-apphtml. */ /* New text tokens are UNCONSUMED; no token VALUE consumed; colors preserved. */ --pos:#2E9E6B; --neg:#DC5B57; --pos-text:#177A4A; --neg-text:#C0392B; --warn:#E0992A; --warn-tint:#FBF0DD; /* P3b-apphtml-hero: figure-SIGN text ON the .cc2-hero amount. The hero bg DIFFERS */ /* by theme: light hero = var(--cockpit-gradient); dark hero = var(--bg-elev) plus a */ /* radial halo using var(--teal-soft). Both are dark surfaces, so a single pale pair */ /* is defined once here (like --cat-*) and chosen to pass contrast on the ACTUAL hero */ /* backgrounds of BOTH themes. Pale tints clear >=3:1 LARGE-text (the 32px .cc2-amount): */ /* on the light cockpit-gradient amount region 0-40% (#0C5A63->#127C82) pos 6.41/4.03, */ /* neg 6.06/3.81; the dark var(--bg-elev) surface is darker still, so the same pair */ /* clears there too. The dark figure-TEXT tokens (--pos-text/--neg-text) fail on these */ /* dark hero backgrounds, so the hero needs its own proven pair. */ --pos-on-hero:#BFF3D9; --neg-on-hero:#FFD9D3; --border:#E2E8E6; --border-subtle:#EEF2F1; --status-confirmed:var(--accent); /* introduced P2a with --accent */ --status-pending:var(--warn); --status-done:#B4C0BD; /* P2b carve-out (B-P2-1): LEGACY blue frozen as its own tokens so the upcoming */ /* interactive --blue->teal migration (P2b-2+) does NOT recolor these NON-interactive */ /* meanings. Values = current rendered blue (zero diff). Pre-existing AA is finding */ /* F-P2-4; P4/P7 may fold these into the identity/status systems. */ /* identity: "Personal use" session-type chip (js/state.js SESSION_TYPES). */ --session-personal:#1463FF; --session-personal-bg:#E8EEFF; /* status/info: dry-run/preview + linked/contact badges (communication.js, passengers.js). */ --info:#1463FF; --info-bg:#dde8fb; --font-serif:Georgia,"Times New Roman",serif; --font-sans:"SF Pro Text",-apple-system,system-ui,sans-serif; --font-mono:"SF Mono",ui-monospace,monospace; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px; /* CATEGORY ICON CHIPS - identity, never status (HS-R14). Self-contained: */ /* a white glyph on a --cat-* fill reads identically on light and dark. */ --cat-on:#FFFFFF; --cat-aircraft:#0E9C8E; --cat-boat:#2F6FE0; --cat-vehicle:#E0992A; --cat-property:#E0633F; --cat-ledger:#2E9E6B; --cat-reserve:#6B5CC4; --cat-settle:#D4537E; --cat-docs:#6B7A77; /* SOFT category chip tints (P7): mode-aware pale bg paired with --ink text/ */ /* self-colored emoji. AA-safe in BOTH modes for ALL categories -- avoids the */ /* white-glyph-on-fill contrast fail (e.g. white on --cat-vehicle amber ~2.2:1). */ --cat-aircraft-soft:#E4F4F1; --cat-boat-soft:#E6EEFC; --cat-vehicle-soft:#FBF0DD; --cat-property-soft:#FBE7E0; --cat-docs-soft:#EEF1F0; --r-chip:10px; --chip-sm:30px; --chip-md:36px; --chip-lg:42px; /* P8 TYPE SCALE: serif hero metric size (mode-independent). Consumed by the */ /* flight-log serif hero (sessions.js). Section-divider size will be added with */ /* its consuming step (no unused scaffolding). */ --fs-hero:34px; /* HERO-ONLY gradient chips (onboarding / empty states / marketing). Never dense or financial views. */ --grad-aircraft:linear-gradient(140deg,#16B5A6,#0C7E78); --grad-boat:linear-gradient(140deg,#4A8BF0,#2456C2); --grad-vehicle:linear-gradient(140deg,#F0B254,#CC7E15); --grad-property:linear-gradient(140deg,#EE7E5C,#C84E2C); --grad-ledger:linear-gradient(140deg,#46B883,#208755); --grad-reserve:linear-gradient(140deg,#8576D6,#564AAC); --grad-settle:linear-gradient(140deg,#E06E96,#BC3E68); --grad-docs:linear-gradient(140deg,#869490,#5A6764); } /* night / ramp. Triggered by the app's MANUAL theme attribute (P1a, B-P1-1): js/app.js derives the effective theme from saved-pref OR prefers-color-scheme and sets/removes [data-theme="dark"] on , so the comfort tokens stay consistent with the rest of the shell (app.html's own dark block at :root[data-theme="dark"]) in every case, including a user override of the system setting. */ :root[data-theme="dark"], [data-theme="dark"] { --page:#0E1513; --surface:#18211F; --surface-2:#121A18; /* SOFT category tints, dark variants (P7) -- deep so --ink (light in dark) reads. */ --cat-aircraft-soft:#16332E; --cat-boat-soft:#16243F; --cat-vehicle-soft:#33260C; --cat-property-soft:#3A1E16; --cat-docs-soft:#202A28; --text-primary:#E9EEEC; --text-secondary:#97A6A2; --text-tertiary:#7F938E; /* P2a: dark --accent + --accent-text (bright teal, AA on dark surfaces). */ --accent:#2FD0C0; --accent-text:#2FD0C0; --accent-tint:#16332E; --accent-on:#0A2E2A; --header:#0A2E2A; /* P3b-token figure-TEXT tokens, dark (AA body >=4.5 on dark --surface/--page; see light block). */ --pos:#4CC38A; --neg:#F2716C; --pos-text:#4CC38A; --neg-text:#F2716C; --warn:#E0992A; --warn-tint:#33260C; --border:#243330; --border-subtle:#222F2C; --status-done:#4F5E5A; /* P2b carve-out dark values (= current dark --blue/--blue-bg; --info-bg keeps :root */ /* #dde8fb, matching today's undefined-(--blue-soft) fallback in dark -- zero diff). */ --session-personal:#4D8BFF; --session-personal-bg:#0F2640; --info:#4D8BFF; /* P2b-2 translucent teal derivatives, dark (= dark --accent #2FD0C0 rgb at low alpha). */ --accent-glow:rgba(47,208,192,.18); --accent-border:rgba(47,208,192,.22); --accent-soft:rgba(47,208,192,.06); } /* Sanctioned exception (login / marketing hero ONLY): */ /* --hero-gradient: linear-gradient(135deg,#0C5A63,#127C82,#1FA3A3,#4CC9BD); */