/* ALFRED DESIGN TOKENS v3.1 "Private bank" · LOCKED 15 Oct 2026 (Franke approved the pack and the recipes). Step 1 of the v3.1 build: the values are swapped in the shared files, no switch. Replaces v2.0.2 (retired). Source: docs/brand-pack-v3/alfred.tokens.v3.css, which this file carries verbatim as the first block (tests/test_look_v31.py proves it). Only this file states a colour, face, size, radius, shadow, speed or layer. New code uses the --v3-* names; the --al-* layer below points the names the screens already use at the v3.1 values by ROLE, so the whole app repaints at once, and it shrinks as each area is rebuilt (IMPLEMENTATION.md step 4). */ :root{ --v3-navy:#1E3550;--v3-brass:#B08D57;--v3-ink:#142033;--v3-text-2:#64748B;--v3-text-3:#8B97A6; --v3-line:#E6EAF0;--v3-page:#FFFFFF;--v3-card:#FFFFFF; --v3-menu:#FBFAF7;--v3-menu-line:#ECE7DD;--v3-menu-selected:#F3EEE4;/* menu only */ --v3-chip:#EEF1F5;--v3-grid:#F1F3F6;/* chart gridlines and lane rules only */--v3-halo:rgba(59,130,246,.12); --v3-positive:#15803D;--v3-positive-bg:#EAF6EE;--v3-attention:#B45309;--v3-attention-bg:#FFF4E5;--v3-critical:#B44747;--v3-critical-bg:#FBECEC; --v3-series-1:#1E3550;--v3-series-2:#C9D3E0;--v3-series-3:#7E8FA6;--v3-series-4:#94603F;/* cinnamon */--v3-series-5:#7C4D63;/* mulberry */ --v3-radius-card:6px;--v3-radius-button:6px;--v3-radius-step:3px;--v3-radius-chip:99px; --v3-shadow-card:0 1px 2px rgba(20,32,51,.04),0 8px 24px rgba(20,32,51,.05); --v3-control-edge:#7E8FA6;/* fields, secondary buttons, chips at rest */--v3-focus:0 0 0 2px #FFFFFF,0 0 0 4px #1E3550;--v3-primary-hover:#142033; --v3-control-h:40px;--v3-chip-h:30px;--v3-row:52px;--v3-row-compact:44px;--v3-row-2line:64px;--v3-pad-card:24px;--v3-gap-card:24px;--v3-end-space:24px;--v3-topbar-h:60px; --v3-radius-layer:10px;--v3-radius-menu:8px;--v3-layer-inset:12px; --v3-shadow-menu:0 0 0 1px rgba(20,32,51,.06),0 10px 24px rgba(20,32,51,.14);--v3-shadow-layer:0 0 0 1px rgba(20,32,51,.06),0 10px 20px rgba(20,32,51,.10),0 40px 90px -16px rgba(20,32,51,.40);--v3-scrim:rgba(20,32,51,.26); --v3-ease:cubic-bezier(.2,.7,.2,1);--v3-t-hover:180ms;--v3-t-menu:140ms;--v3-t-local:190ms;--v3-t-panel:220ms;--v3-t-dialog:220ms; --v3-z-sticky:5;--v3-z-frame:10;--v3-z-layer:40;--v3-z-attached:60;--v3-z-notice:80; --v3-font:'Plus Jakarta Sans',sans-serif; /* v1.1, 15 Oct: space, type, surfaces, avatars, motion */ --v3-s-1:4px;--v3-s-2:8px;--v3-s-3:12px;--v3-s-4:16px;--v3-s-5:24px;--v3-s-6:32px;--v3-s-7:40px;--v3-s-8:56px;--v3-s-9:72px; --v3-margin-1366:32px;--v3-margin-1440:40px;--v3-margin-1920:56px;--v3-content-max:1440px;--v3-measure:680px;--v3-pad-lead:28px; --v3-fs-hero:48px;--v3-fs-title:28px;--v3-fs-lead:32px;--v3-fs-section:20px;--v3-fs-sub:16px;--v3-fs-body:14.5px;--v3-fs-read:15px;--v3-fs-meta:13.5px;--v3-fs-label:12px;--v3-fs-ref:13px; --v3-shadow-raised:0 1px 2px rgba(20,32,51,.05),0 12px 32px rgba(20,32,51,.10);--v3-lift:-2px; --v3-avatar-s:24px;--v3-avatar-m:32px;--v3-avatar-l:40px;--v3-you-ring:0 0 0 2px #B08D57; --v3-t-count:600ms;--v3-t-shimmer:1400ms;--v3-hover-card-delay:400ms;--v3-search-debounce:250ms; } @media (prefers-reduced-motion:reduce){:root{--v3-t-hover:0ms;--v3-t-menu:0ms;--v3-t-local:0ms;--v3-t-panel:0ms;--v3-t-dialog:0ms;--v3-t-count:0ms;--v3-t-shimmer:0ms;--v3-lift:0px}} /* ═══ THE --al-* LAYER: the names the screens already use, by role, at the v3.1 values. Nothing new may use a name from this layer. ═══ */ :root{ /* Planes: the page is white; air comes from space, not from a background colour (RULES section 3) */ --al-shell:var(--v3-menu); /* the menu */ --al-page:var(--v3-page); --al-card:var(--v3-card); --al-paper:var(--v3-card); /* documents and emails being read or written */ --al-field:var(--v3-card); --al-raised:var(--v3-card); /* menus, popovers, dialogs */ /* Ink */ --al-text:var(--v3-ink); --al-text-2:var(--v3-text-2); /* labels, dates, captions. Text 3 (3.0:1) is for 18px and up only, never used here */ --al-text-inverse:var(--v3-page); /* Lines */ --al-divider:var(--v3-line); /* every 1px rule */ --al-line-control:var(--v3-control-edge); --al-scroll-thumb:var(--v3-series-2); /* Action and selection */ --al-action:var(--v3-navy); /* the ONE primary per view, links, selected text */ --al-action-hover:var(--v3-primary-hover); --al-selected:var(--v3-chip); /* chip tint behind a selected row, sub-section or filter chip */ --al-focus:var(--v3-focus); /* Menu */ --al-rail-text:var(--v3-text-2); --al-rail-text-hi:var(--v3-navy); --al-rail-icon:var(--v3-text-2); --al-rail-label:var(--v3-text-2); --al-rail-plate:var(--v3-chip); --al-rail-plate-hi:var(--v3-menu-selected); --al-rail-line:var(--v3-menu-line); /* Brass: the menu's selected edge, the tab underline, the current step, the lead-band and advice edges. Never a state, never a button */ --al-brass:var(--v3-brass); --al-brass-read:var(--v3-brass); /* State: never category, type or priority */ --al-success:var(--v3-positive); --al-success-wash:var(--v3-positive-bg); --al-attention:var(--v3-attention);--al-attention-wash:var(--v3-attention-bg); --al-critical:var(--v3-critical); --al-critical-wash:var(--v3-critical-bg); --al-info:var(--v3-navy); --al-info-wash:var(--v3-chip); /* v3.1 has no blue: information is navy on the chip tint */ /* Type */ --al-font-ui:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; --al-font-identity:'Cormorant Garamond','Times New Roman',serif; /* the A mark ONLY */ --al-font-id:'DM Mono',ui-monospace,Consolas,monospace; /* references only: cadastral, case number */ --al-fs-title:var(--v3-fs-title); --al-fs-card:var(--v3-fs-sub); --al-fs-read:var(--v3-fs-read); --al-fs-ui:var(--v3-fs-body); --al-fs-label:var(--v3-fs-meta); --al-fs-rail-label:var(--v3-fs-label); --al-lh-read:1.6; /* @kind other */ --al-lh-ui:1.5; /* @kind other */ --al-lh-tight:1.2; /* @kind other */ /* Geometry */ --al-r-card:var(--v3-radius-card); --al-r-control:var(--v3-radius-button); --al-r-popover:var(--v3-radius-menu); --al-r-modal:var(--v3-radius-layer); --al-r-chip:var(--v3-radius-chip); --al-r-rail-item:var(--v3-radius-menu); --al-control-h:var(--v3-control-h); --al-chip-h:var(--v3-chip-h); --al-row:var(--v3-row); --al-row-compact:var(--v3-row-compact); --al-row-2line:var(--v3-row-2line); --al-row-dense:var(--v3-row-compact); /* no other row heights */ --al-pad-card:var(--v3-pad-card); --al-gap-card:var(--v3-gap-card); --al-gap-title:var(--v3-s-3); --al-rail-w:228px; --al-topbar-h:var(--v3-topbar-h); --al-sticky-h:var(--v3-topbar-h); --al-paper-w:794px; /* Depth: card = a 1px line and the soft shadow; raised = hover and the lead band; layers = menus, panels, dialogs */ --al-shadow-card:var(--v3-shadow-card); --al-shadow-card-hover:var(--v3-shadow-raised); --al-shadow-paper:var(--v3-shadow-card); --al-shadow-menu:var(--v3-shadow-menu); --al-shadow-modal:var(--v3-shadow-layer); /* Motion */ --al-t-hover:var(--v3-t-hover); /* @kind other */ --al-t-menu:var(--v3-t-menu); /* @kind other */ --al-t-local:var(--v3-t-local); /* @kind other */ --al-t-panel:var(--v3-t-panel); /* @kind other */ --al-t-dialog:var(--v3-t-dialog); /* @kind other */ --al-t-breath:4200ms; /* @kind other */ --al-ease:var(--v3-ease); /* @kind other */ /* Layers: no other z-index anywhere */ --al-z-sticky:var(--v3-z-sticky); /* @kind other */ --al-z-frame:var(--v3-z-frame); /* @kind other */ --al-z-layer:var(--v3-z-layer); /* @kind other */ --al-z-attached:var(--v3-z-attached); /* @kind other */ --al-z-notice:var(--v3-z-notice); /* @kind other */ } /* ═══ LEGACY NAMES, pointed at the v3.1 values by ROLE. They exist only so screens not yet rebuilt keep working and are deleted with the last of them. ═══ */ :root{ --al-canvas:var(--al-page); --al-work:var(--al-card); --al-inset:var(--al-page); --al-modal:var(--al-raised); --al-text-3:var(--al-text-2); --al-line:var(--al-divider); --al-line-strong:var(--al-line-control); --al-navy-950:var(--al-action); --al-navy-900:var(--al-action); --al-navy-800:var(--al-action-hover); --al-navy-wash:var(--al-selected); --al-tab-selected:var(--al-selected); --al-border:var(--al-divider); --al-fs-11:var(--v3-fs-label); --al-fs-12:var(--v3-fs-label); --al-fs-13:var(--v3-fs-meta); --al-fs-14:var(--v3-fs-body); --al-fs-16:var(--v3-fs-sub); --al-fs-20:var(--v3-fs-section); --al-fs-28:var(--v3-fs-title); --al-t-immediate:var(--al-t-hover); --al-t-micro:var(--al-t-menu); --al-t-structural:var(--al-t-panel); --al-t-modal:var(--al-t-dialog); --al-r-mark:var(--v3-radius-step); --al-r-well:var(--al-r-card); --al-space:4px; --al-shadow-raised:var(--v3-shadow-raised); --al-control-line:var(--al-line-control); --al-action-ink:var(--al-action); --al-attention-line:var(--al-attention); --al-btn-top:var(--al-card); --al-btn-bottom:var(--al-card); --al-btn-hover:var(--al-selected); --al-btn-hover-line:var(--al-action); --al-quiet-hover:var(--al-selected); --al-primary-top:var(--al-action); --al-primary-bottom:var(--al-action); --al-primary-line:var(--al-action); --al-primary-hover:var(--al-action-hover); --al-danger-bg:var(--al-critical-wash); --al-danger-line:var(--al-critical); --al-danger-line-hover:var(--al-critical); --al-shadow-btn:none; --al-shadow-primary:none; } /* the search magnifier as a background image for the fields the screens draw themselves; a data URI cannot read var(), so its stroke is --v3-text-2 written out */ :root{--al-icon-search:url("data:image/svg+xml;utf8,")}