/* Belphor design tokens (D51, the design bible, 11 Oct 2026). index.css imports this file on its first line, ahead of every rule (D52 item 1), so every rule in the app reads these names; D52 rewires index.css, tailwind.config.js and ui.tsx onto them, and this file is the spec. Every token names the principle it serves (P1 to P12, docs/design/bible/general/02-principles.md) and the Apple measurement it comes from (row IDs of docs/design/bible/general/01-measurements.md), or says it is Belphor's own. docs/design/bible/belphor/03-tokens.md explains each section, prints the contrast table (computed from this file by docs/design/bible/tools/contrast-table.mjs, so no ratio is typed here) and maps every old name to its token. Where a token replaces an index.css variable it keeps that name (--edge-ctl, --dur-*, --ease-out, --track-*, --lead-*, --weight-*, --r-track, --seg-pad, --r-item). Dark is the default; light is opt-in with data-theme="light" on . The phone (390) is the max-width 767px block; a fluid token is clamp(var(--x-compact), ..., var(--x-regular)) from 390 to 1280. A custom property resolves where it is declared, so a derived token is declared again wherever its inputs change (the D29e lesson). */ :root { /* ---------------------------------------------------------------- 1. Radius and nesting (P1, P2) ---------------- Three shapes: the capsule, the control, the container. A container's radius is the control radius plus the inset it holds its content at, so whatever sits at that inset is concentric with it (outer = inner + inset: RAD-36, RAD-100, AppKit's containerConcentric RAD-105). The corner is the browser's circular arc, which departs from Apple's continuous corner by at most 0.0138 r (RAD-10), under one CSS pixel at every Belphor radius (0.39 px at 28, 0.50 at 36, 0.61 at 44, 0.72 at 52; 1.2 to 2.2 device pixels on a 3x phone); corner-shape is an opt-in enhancement (the @supports block at the end; RAD-28 to RAD-31, RAD-33, RAD-35, RAD-89 to RAD-96, RAD-99). */ --radius-pill: 9999px; /* a capsule: half the height (RAD-69, CTL-28); the iOS 2025 default for buttons, glass, switches, segmented tracks and the tab bar (RAD-71, CTL-97, CTL-100, CTL-112); on macOS mini to medium buttons stay rounded rectangles and capsules start at 28 pt (RAD-71, RAD-139) */ --radius-control: 12px; /* fields, popovers, wells, chart frames: Belphor's own, chosen so a card of 28 holds it concentrically at a 16 inset (28 - 16 = 12). Apple has no single rule: macOS sets a control's radius by its size class and turns it into a capsule from 28 pt (RAD-139) */ --inset-card: 16px; /* compact density, every width (P11); comfortable is 24, see [data-density] below */ --inset-sheet: 24px; /* 16 on the phone (the max-width 767px block) */ --inset-page: 16px; /* the gutter a page frame holds cards at */ --radius-card: calc(var(--radius-control) + var(--inset-card)); /* 28 compact, 36 comfortable */ --radius-sheet: calc(var(--radius-control) + var(--inset-sheet)); /* 36 desktop, 28 phone (top corners) */ --radius-page: calc(var(--radius-card) + var(--inset-page)); /* 44 compact, 52 comfortable */ --radius-in-card: max(0px, calc(var(--radius-card) - var(--inset-card))); /* = --radius-control by construction */ --radius-in-sheet: max(0px, calc(var(--radius-sheet) - var(--inset-sheet))); /* = --radius-control by construction */ /* an inset is measured from the container's outer edge, its hairline included (as the track counts its own), so the padding is the inset less the hairline: a 12 well at 16 from a 28 card's outer edge is then exactly concentric */ --pad-card: calc(var(--inset-card) - var(--hairline)); /* 15 compact, 23 comfortable */ --pad-sheet: calc(var(--inset-sheet) - var(--hairline)); /* 23 desktop, 15 phone */ /* one track geometry for the header island, the tab bar and the segmented control (kept D29e names): 44 px items at a 4 px padding inside a 1 px hairline, so the track is 54 tall, a capsule of radius 27, and its items capsules of 22, concentric (27 - 5 = 22). Apple's tab bar holds 31 to 27 across a 4 pt inset (CTL-112). Was: the island 28 and 7 (58 tall with its hairline, so not a capsule, and 6 px steps), the segmented track 27 and 5 */ --seg-pad: 5px; /* 4 px padding plus the 1 px hairline */ --island-h: calc(var(--hit-min) + 2 * var(--seg-pad)); /* 54 */ --r-track: calc(var(--island-h) / 2); /* 27 */ --r-item: calc(var(--r-track) - var(--seg-pad)); /* 22, a capsule of the 44 item */ /* ---------------------------------------------------------------- 2. Spacing (P3) ---------------------------- Multiples of 8 between components; 4 and 12 only inside a component (a control, a row, a chip), which is Belphor's own rule. Apple publishes no grid (LAY-14); the convention is multiples of 8 on a 4 pt baseline grid (LAY-15). Apple's defaults sit on 4 pt steps at most: 8 between siblings (LAY-07, LAY-93) and 16 padding (LAY-92) on 8; 44 controls (CTL-01) and 52 rows (LAY-52) on 4; and some on neither (20, LAY-01; 21, LAY-42; 54, LAY-39). */ --space-4: 4px; /* inside a component only */ --space-8: 8px; --space-12: 12px; /* inside a component only */ --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --page-margin: 40px; /* 16 on the phone: UIKit's root margin on phones narrower than 414 pt (20 from 414, LAY-01, LAY-03); 40 on the desktop is Belphor's own (apple.com pads its content 22 from 834 px and 16 below, LAY-89) */ --page-max: 1360px; /* Belphor's own content width (apple.com 980, LAY-160) */ --reading-max: 40em; /* a prose column: about 39 to 40 em of body text, UIKit's readable width (TYP-54, TYP-95) */ --grid-columns: 12; /* 4 on the phone */ --grid-gutter: 16px; /* between cards, every width (P3) */ --bar-h: 56px; /* the phone app bar, full width with a bottom hairline, a 44 target centred in it; Belphor's own (iOS 26 bar 54, LAY-39). The tab bar and the header island are tracks, --island-h 54 */ --tabbar-inset: 16px; /* the floating tab bar's distance from the edges, Belphor's own (iOS 26: 21, LAY-42) */ --header-top: 32px; /* the desktop header above the island, or the safe area plus 16 when larger; was 28 */ --page-start: var(--space-16); /* the gap from a bar to the first card; was 12 on the phone (D47b) and 24 on the desktop */ --row-min: 44px; /* a row's floor: the touch target (CTL-01, CTL-59) */ --row: 52px; /* a one-line list or settings row: iOS 26's default cell (LAY-52); the Small column would give 50 (52 less Body's 2 pt shorter line at Small: TYP-06 22, TYP-120 20; inferred by this chat), Belphor keeps 52 so its rows and Apple's match */ --row-2: 64px; /* a two-line row (Headline over Subhead, 20 + 18) with 12 above and below, up to the grid */ --row-3: 80px; /* a three-line row (Headline, a 24 chip line, a 16 Footnote line) with 10 above and below: the Reflex strategy row with its record; Belphor's own */ /* sizes the blueprint uses (04-layout.md), Belphor's own unless stated */ --sheet-w: 520px; /* a task sheet; today's 420 to 560 fold into it */ --sheet-w-wide: 720px; /* a wider task or inspection (the CoinModal); today's 640 to 760 */ --sheet-w-full: 960px; /* the strategy builder; today's 860 and 960 */ --sheet-w-inspect: min(1312px, calc(100vw - var(--space-48))); /* an inspection sheet opened to the page's width (R10) */ --chart-h-card: 160px; /* a chart inside a card (the equity curve, D2.10) */ --chart-h: 380px; /* a chart that is the subject: inside a sheet, or a page's lead block (the Trade desk's coin); 240 on the phone; the container scrolls, the chart never shrinks */ --chart-gutter: 40px; /* the y labels' column */ --chip-h: 24px; /* a chip: Caption 2 on a 4 px padding, rounded up to the grid; 12 at its sides */ --avatar: 32px; /* a row's leading avatar */ --icon: 20px; /* a tab's icon */ --dot: 8px; /* a status dot */ --dot-badge: calc(var(--dot) + 2 * var(--hairline)); /* the Telegram dot on the account chip, 10, ringed --stroke in the ground (04-layout section 2) */ --popover-w: min(264px, calc(100vw - var(--space-48))); /* Info's popover (today's width, ui.tsx 355), never wider than the page less its margins */ --lion-header: 48px; /* the lion in the desktop header */ --lion-bar: 34px; /* the lion in the phone app bar, inside a 44 circle, and in the landing island's 44 item */ --lion-banner: 96px; /* the lion on the landing's closing banner (today's size) */ --lion-vault: 80px; /* the lion over the Golden vault (Golden.tsx 475, today's size) */ /* ---------------------------------------------------------------- 3. Type (P4, P11) --------------------------- Belphor's scale is Apple's Dynamic Type column Small, two steps below the default Large (TYP-16, TYP-17; the Small table is TYP-115 to TYP-125, the Large one TYP-01 to TYP-11), set in Inter, which matches SF at about 0.97 of its size (TYP-59, TYP-76). Only the two largest roles grow from 390 to 1280. Gatsby draws capitals only and proportional figures, so it sets names only (the wordmark, a page name), never a sentence or a figure. Weights are Belphor's: Apple sets every style Regular except Headline and emphasizes titles in Bold (TYP-65, TYP-43); Belphor sets titles 600 and 700 by default because Inter at 400 reads thin on black at these sizes (03-tokens.md, departures). Tracking is Inter 3's published Dynamic Metrics values (TYP-79 to TYP-81), retired by Inter 4 in favour of its opsz axis but correct while Inter loads without that axis, which is today's Google Fonts request; with opsz, set every tracking token to 0 (TYP-83, TYP-84). */ --font-display: "Gatsby", Georgia, serif; --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --weight-light: 300; /* the hero figure only, 44 px and up: Belphor's departure from TYP-67, which avoids light weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --type-large-title-size-compact: 26px; /* section titles */ --type-large-title-size-regular: 32px; --type-large-title-size: clamp(var(--type-large-title-size-compact), calc(23.3708px + 0.67416vw), var(--type-large-title-size-regular)); --type-large-title-line: 1.22; /* 39 / 32 (TYP-115) */ --type-large-title-weight: var(--weight-bold); --type-large-title-track: -0.021em; /* Inter at 26 to 32: -0.020 to -0.022 (TYP-80, TYP-81) */ --type-title-1-size-compact: 22px; /* a reading page's card heading: Pending, Auth, the access card */ --type-title-1-size-regular: 26px; --type-title-1-size: clamp(var(--type-title-1-size-compact), calc(20.2472px + 0.44944vw), var(--type-title-1-size-regular)); --type-title-1-line: 1.23; /* 32 / 26 (TYP-116) */ --type-title-1-weight: var(--weight-semibold); --type-title-1-track: -0.02em; --type-title-2-size: 20px; /* a card title that is a sentence (TYP-117) */ --type-title-2-line: 1.25; --type-title-2-weight: var(--weight-semibold); --type-title-2-track: -0.017em; --type-title-3-size: 18px; /* every sheet title (the CoinModal's coin name too), the phone app bar's page name (TYP-118) */ --type-title-3-line: 1.28; --type-title-3-weight: var(--weight-semibold); --type-title-3-track: -0.014em; --type-headline-size: 15px; /* a row's title, a card's lead line (TYP-119) */ --type-headline-line: 1.33; --type-headline-weight: var(--weight-semibold); --type-headline-track: -0.009em; --type-body-size: 15px; /* running text (TYP-120); loose leading, +2, for longer passages (TYP-21, TYP-94) */ --type-body-line: 1.47; --type-body-weight: var(--weight-regular); --type-body-track: -0.009em; --type-field-size: 15px; /* a text field; 16 on the phone so iOS Safari does not zoom on focus (TYP-91) */ --type-callout-size: 14px; /* control labels, table cells (TYP-121) */ --type-callout-line: 1.36; --type-callout-weight: var(--weight-medium); --type-callout-weight-em: var(--weight-semibold); /* a button's label */ --type-callout-track: -0.006em; --type-subhead-size: 13px; /* secondary lines (TYP-122) */ --type-subhead-line: 1.38; --type-subhead-weight: var(--weight-regular); --type-subhead-track: -0.003em; --type-footnote-size: 12px; /* captions, reasons under a disabled control (TYP-123) */ --type-footnote-line: 1.33; --type-footnote-weight: var(--weight-regular); --type-footnote-track: 0em; --type-caption-1-size: 11px; /* data labels, axis captions; 11 is the floor (TYP-45, TYP-124) */ --type-caption-1-line: 1.27; /* 14 / 11, one step looser than Apple's 13 so a two-line label holds */ --type-caption-1-weight: var(--weight-medium); --type-caption-1-track: 0.005em; --type-caption-2-size: 11px; /* chips and caps labels (TYP-125); capitals are Belphor's own (iOS 26 dropped them from section headers, CTL-120) */ --type-caption-2-line: 1.18; --type-caption-2-weight: var(--weight-semibold); --type-caption-2-track: 0.005em; --track-caps: 0.14em; /* caps labels and table heads (kept D29c name and value) */ --track-chip: 0.08em; /* chips and tags (kept D29c name and value) */ /* Belphor's roles above Apple's eleven: the landing headline, and figures, which are the product */ --type-hero-size-compact: 28px; --type-hero-size-regular: 68px; --type-hero-size: clamp(var(--type-hero-size-compact), calc(10.4719px + 4.49438vw), var(--type-hero-size-regular)); --type-hero-line: 1.04; --type-hero-weight: var(--weight-bold); --type-display-size-compact: 26px; /* a reading page's section headline (the landing's .display-h2) */ --type-display-size-regular: 48px; --type-display-size: clamp(var(--type-display-size-compact), calc(16.3596px + 2.47191vw), var(--type-display-size-regular)); --type-display-line: 1.08; --type-display-weight: var(--weight-bold); --type-display-track: -0.022em; --type-lede-size-compact: 17px; /* a reading page's lead paragraph (.body-lg): Apple's Body at the default size (TYP-06) */ --type-lede-size-regular: 20px; --type-lede-size: clamp(var(--type-lede-size-compact), calc(15.6854px + 0.33708vw), var(--type-lede-size-regular)); --type-lede-line: 1.6; --type-lede-weight: var(--weight-regular); --type-lede-track: -0.013em; /* Inter at 17 to 20: -0.013 to -0.017 (TYP-80) */ --type-figure-size-compact: 22px; --type-figure-size-regular: 30px; --type-figure-size: clamp(var(--type-figure-size-compact), calc(18.4944px + 0.89888vw), var(--type-figure-size-regular)); --type-figure-hero-size-compact: 44px; --type-figure-hero-size-regular: 64px; --type-figure-hero-size: clamp(var(--type-figure-hero-size-compact), calc(35.2360px + 2.24719vw), var(--type-figure-hero-size-regular)); --type-wordmark-size: 28px; /* the lockup on a reading page */ --type-wordmark-header-size: 18px; /* the wordmark beside the lion in the desktop header (today's Wordmark size 18) */ --track-wordmark: 0.18em; /* Gatsby's own spacing (kept from tailwind.config.js) */ --track-code: 0.4em; /* the six-digit sign-in code, set at the Figure size in --font-mono (today's 0.4em, Auth); Belphor's own */ --track-hero: -0.022em; /* kept name; the Hero (28 to 68) and Figure hero (44 to 64) roles; was -0.035em (Inter: -0.022 at 40 and 80, TYP-81) */ --track-display: -0.02em; /* kept name; 22 to 32 px figures and headings (Inter: -0.018 to -0.021, TYP-80) */ --track-num: -0.009em; /* kept name; figures at body sizes; was -0.01 */ --track-body: -0.009em; /* kept name; 15 px; was 0 (Inter at 15: -0.009, TYP-80) */ --lead-hero: 1; --lead-figure: 1.05; --lead-title: 1.22; /* was 1.2 */ --lead-body: 1.47; /* was 1.5 */ --weight-hero: var(--weight-light); --weight-figure: var(--weight-semibold); --weight-title: var(--weight-semibold); /* was 500 */ --numeric: tabular-nums; /* every figure that updates or aligns */ /* ---------------------------------------------------------------- 4. Colour roles, dark (P4, P5) ----------------- Backgrounds rise lighter (P7). Apple's dark ladder is #000000, #1C1C1E, #2C2C2E (COL-31 to COL-33), steps of 1.23:1 (COL-79) and 1.22:1 (computed here with COL-68 to COL-71). Belphor lifts its card to 1.21:1 over the black ground and keeps its raised gradient's top stop where it is, so the labels hold their floors on the fills inside a raised tile; the tier's hairline carries the rest of that step. Labels: Apple's ladder is white and then one grey at 0.6, 0.3 and 0.18 (COL-19 to COL-22), and 0.3 measures 2.23:1 (COL-75), so Belphor's tiers are solid colours held at the WCAG floors on every ground they meet: 4.5:1 for labels 1 to 3 (COL-62), 3:1 for label 4, which is large text (24 px, or 18.67 px bold: COL-63, COL-66, COL-67), icons and non-text (COL-65) only. */ --bg-1: #000000; /* the ground (Apple's dark base, COL-86) */ --bg-2: #181A1F; /* the card; was #13151A */ --bg-2-fill: linear-gradient(180deg, #1B1D23 0%, #16181D 100%); --bg-3: #1C1F25; /* the raised tile */ --bg-3-fill: linear-gradient(180deg, #1E2129 0%, #1A1D23 100%); /* top stop kept from today; the foot was #171A20 */ --bg-3-hover: linear-gradient(180deg, #242833 0%, #1C1F26 100%); /* a raised row under the pointer (D27c) */ --bg-well: rgba(6, 7, 8, 0.55); /* a recess inside a card: darker, never a shadow */ --label-1: #F2F1ED; /* was platinum */ --label-2: #A3A7AD; /* was secondary */ --label-3: #9094A0; /* was tertiary #8B8F98 */ --label-4: #73777F; /* large text, icons, non-text only; was faint #6F737B */ --fill-1: rgba(255, 255, 255, 0.14); /* a switch's off track, a slider's empty track (Apple: systemFill and secondarySystemFill, COL-27, COL-28) */ --fill-2: rgba(255, 255, 255, 0.08); /* a pressed or hovered row, a neutral chip */ --fill-3: rgba(255, 255, 255, 0.05); /* a field, a ghost pill (tertiarySystemFill, COL-29) */ --fill-4: rgba(255, 255, 255, 0.035); /* a large area: well-2, a selected list row (quaternarySystemFill, COL-30) */ --separator: rgba(255, 255, 255, 0.06); /* a hairline between surfaces, decorative (Apple separator, COL-24, COL-78) */ --separator-raised: rgba(255, 255, 255, 0.09); --edge-ctl: rgba(255, 255, 255, 0.36); /* the outline that identifies a control, 3:1 on every ground (COL-65); kept name, was 0.34, under 3:1 on the black ground */ /* the flame: the one primary action and live money (P5). Brand values, Belphor's own, kept from tailwind.config.js; Apple's own tint is systemBlue (COL-08), which Belphor does not use */ --flame-bright: #F2A85A; --flame: #E8873C; --flame-deep: #D8752E; --flame-ink: #E8873C; /* the flame as text */ --primary-fill: linear-gradient(180deg, var(--flame-bright) 0%, var(--flame-deep) 100%); /* the one primary pill */ --primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 12px rgba(216, 117, 46, 0.3); /* today's, Belphor's own */ --on-primary: #16171A; /* the primary pill's label: 5.55:1 on both stops (the contrast table; COL-62) */ --accent-stop-1: #E9A94D; /* the accent's three stops (D25a) */ --accent-stop-2: #D26A2C; --accent-stop-3: #DC7034; --accent-fill: linear-gradient(150deg, var(--accent-stop-1) 0%, var(--accent-stop-2) 55%, var(--accent-stop-3) 100%); --accent-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25); --accent-glow: 0 24px 64px rgba(180, 71, 31, 0.4); /* the accent block's own flame light, Belphor's signature */ --on-accent: #3A1408; /* umber */ --on-accent-line: rgba(58, 20, 8, 0.18); /* a rule drawn in the ink (ui.tsx UMBER_LINE) */ --accent-well: rgba(20, 8, 4, 0.55); --on-accent-well: #F5E6C8; /* cream on the well */ --on-accent-well-2: rgba(245, 230, 200, 0.82); /* captions on the well (CREAM_80) */ --on-accent-well-3: rgba(245, 230, 200, 0.58); /* a line or mark on the well, non-text only (CREAM_50) */ --on-accent-well-edge: rgba(245, 230, 200, 0.28); /* a chip's edge on the well */ --accent-recess: rgba(245, 230, 200, 0.14); /* a box cut into the accent (.accent-box); no blur: it sits on an opaque gradient, a third blur would be a third material (P6) */ --accent-recess-edge: rgba(255, 255, 255, 0.18); --accent-recess-inset: inset 0 1px 2px rgba(58, 20, 8, 0.22); /* what makes it read as recessed (D25a) */ /* gold: the lion and the record (P5). Brand values, Belphor's own, kept from today; no Apple figure */ --gold-bright: #E4C88F; --gold: #C9A96C; --gold-ink: #C9A96C; --gold-chip: #E3B94A; /* the Gold chip's label (ui.tsx GOLD_CHIP) */ /* the Golden vault (D53 item 7, golden-signals-01): today's three stops, ink and rule, moved out of Golden.tsx. The vault is gold in both themes, so these carry one value; the ink holds 4.60:1 or more at every stop (AST-166) and the rule takes a stronger step under Increase Contrast. Any change to the stops is the owner's. */ --gold-fill: linear-gradient(150deg, #F5D06F 0%, #D9A431 55%, #A9741C 100%); --on-gold: #1A1202; --on-gold-line: rgba(26, 18, 2, 0.18); /* meaning (P5): gain, loss, warning, information; live is the flame, paper is the slate. Today's values, Belphor's own (Apple's system colours are COL-01 to COL-06 and are not used); each holds the floor the contrast table gives it (COL-62 for text, COL-65 for a mark) */ --gain: #9FBE6E; --loss: #E07A72; --loss-bright: #EF807A; /* a loss label on its own tint (claretbright, D25a) */ --loss-on-well: #F0908A; /* a loss mark on the accent well (D29d) */ --gain-on-well: #9FBE6E; /* a gain mark on the accent well: 3.44:1 in both themes, where --gain falls to 1.14:1 in light; a mark, so 3:1 (COL-65) */ --warning: #DCA054; --info: #8098BA; /* was #7C93B4, under 4.5:1 on a field inside a raised tile */ --info-bright: #8AA4C9; /* on its own tint */ --live: var(--flame-ink); --paper: var(--info-bright); /* SIM, Belphor's own simulated fill, gets its own tint beside PAPER (the owner's ruling 14, 12 Oct 2026): neither is real money, and now the colour tells them apart as well as the word. A teal the status chips do not use (OKLab hue 192; live 55, gold 83 to 89, warning 71, filled 126, refused 24, paper and waiting 257), held at 4.5:1 on its tint over every surface like the other chip pairs (the contrast table); Belphor's own value */ --sim: #66C8C4; --chip-live-ink: #F2A85A; /* the LIVE chip's label */ --gain-tint: rgba(159, 190, 110, 0.12); /* chip grounds, today's values */ --loss-tint: rgba(224, 122, 114, 0.12); --warning-tint: rgba(220, 160, 84, 0.12); --info-tint: rgba(124, 147, 180, 0.12); --live-tint: rgba(232, 135, 60, 0.12); --gold-tint: rgba(201, 169, 108, 0.14); --sim-tint: rgba(102, 200, 196, 0.12); /* the SIM chip's ground: its ink at 0.12, as the other tints (ruling 14) */ /* the signal families' chips (ui.tsx KIND_CHIP): a categorical set, dark ink on a filled chip, the same in both themes */ --kind-cto: #B08CE8; /* the owner's ruling 1 (12 Oct 2026): the CTO family leaves the flame, which is for the one primary action and live money (P5); a violet no other family, status or brand colour uses (OKLab hue 301, at least 10 OKLab units from every one of them: flame, orange, gold, olive, claret, amber, slate, teal, grey, platinum); --kind-ink measures 7.32:1 on it (the contrast table); Belphor's own value. Was var(--flame) */ --kind-ignition: #F4F2EE; --kind-migration: #6FA8A0; --kind-smart: #C9C6BF; --kind-golden: #F0C33C; --kind-ink: #0A0A0B; /* controls: a selected thumb and a switched-on toggle are neutral, because the flame means the primary action and live money only (P5; Apple tints only primary actions, COL-121) */ --thumb-bg: #F2F1ED; /* the selected segment, the active nav pill (today #F4F2EE) */ --on-thumb: #0A0A0B; --thumb-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); --ghost-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); --toggle-on: #F2F1ED; /* was the flame */ --toggle-off: var(--fill-1); --toggle-knob-on: #0A0A0B; --toggle-knob-off: #F2F1ED; --toggle-w: 46px; /* 28 tall like iOS 26's 63 x 28 switch with its 2 px knob inset (CTL-100, CTL-101); 46 wide so a round knob travels 18; inside a 44 px button; was 38 x 22 */ --toggle-h: 28px; --toggle-inset: 2px; --toggle-knob: calc(var(--toggle-h) - 2 * var(--toggle-inset)); /* 24: radius 12 in a radius 14 track, concentric */ --well-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35); /* a recess reads as cut in, lit from above */ /* ---------------------------------------------------------------- 5. Elevation (P7) -------------------------- Dark: a lighter surface and a hairline per tier. Belphor drops the resting shadow, its own choice: Apple keeps a weaker one in dark and has modal presentations cast a little drop shadow (COL-124), and that is the one shadow kept here, on a layer that floats over moving content (a sheet, a popover, a toast). */ --hairline: 1px; /* the width of every separator and edge */ --stroke: calc(2 * var(--hairline)); /* a drawn line: the equity line, PulseLine, Journey's connector, the guard's trigger tick, the ring round a chart's end dot or the Telegram dot (ui.tsx strokes 2) */ --elev-1-bg: var(--bg-2-fill); --elev-1-edge: var(--separator); --elev-1-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07); /* no resting shadow in dark, written as a transparent zero shadow, not `none`: a tier draws its highlight and its shadow as one list (var(--elev-1-highlight), var(--elev-1-shadow)), and `none` inside a list voids the whole declaration, which dropped the dark highlight too (D52 item 2, measured in Chrome) */ --elev-1-shadow: 0 0 #0000; --elev-2-bg: var(--bg-3-fill); --elev-2-edge: var(--separator-raised); --elev-2-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09); --elev-2-shadow: 0 0 #0000; --elev-3-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); /* floating only (COL-124; Liquid Glass adapts its shadow, COL-123) */ /* ---------------------------------------------------------------- 6. Materials (P6) -------------------------- Two, named for their job: chrome (bars over scrolling content: the header island, the phone app bar, the tab bar) and sheet (sheets and the open island). Apple's standard materials (COL-48, COL-50 to COL-54) saturate 1.6 to 2.2 in dark (ultraThin and thin 1.6, regular 2.0, thick 2.2; chrome none) over a backdrop blur whose radius, 30, is a Core Animation input sampled at 0.125 scale (COL-49) with no documented CSS equivalent; Belphor keeps its own recipe (blur 24, saturation 1.15) so the flame under a bar does not bloom. Each has a fallback without backdrop-filter and an opaque value under Reduce Transparency (COL-89, COL-90). The scrim is the sheet's dimming layer, not a third material (one scrim, D25). A popover is not a material: the raised fill with the floating shadow, no blur (D29c). */ --mat-chrome-bg: rgba(9, 11, 14, 0.42); --mat-chrome-filter: blur(24px) saturate(1.15); --mat-chrome-edge: rgba(255, 255, 255, 0.06); --mat-chrome-nofilter: rgba(9, 11, 14, 0.93); /* a browser without backdrop-filter */ --mat-chrome-solid: #101216; /* Reduce Transparency: opaque, as index.css does today */ --mat-sheet-bg: rgba(15, 17, 21, 0.72); --mat-sheet-filter: blur(24px) saturate(1.15); --mat-sheet-edge: rgba(255, 255, 255, 0.06); --mat-sheet-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05); --mat-sheet-nofilter: rgba(15, 17, 21, 0.94); --mat-sheet-solid: #101216; --scrim-bg: rgba(6, 7, 8, 0.58); --scrim-filter: blur(8px) saturate(0.85); --scrim-nofilter: rgba(6, 7, 8, 0.82); --scrim-reduced: rgba(6, 7, 8, 0.86); /* near-opaque on purpose: the page must still show behind a sheet */ /* ---------------------------------------------------------------- 7. Motion (P8, P9) ------------------------- Three transition durations (press, ui, sheet) and the fade, which equals --dur-ui; two springs; one easing in and one out; and the three kept loops (the loading pulse, the live dot, the pending ring), each on its own duration. CSS transitions sit in the web bands (100 to 150 ms micro, 150 to 250 standard, 200 to 300 modal: MOT-51); springs only where a gesture or a retarget drives the motion, as linear() curves (MOT-59) sampled from Apple's duration and bounce model (MOT-17, MOT-18) by docs/design/bible/tools/springs.mjs. Nothing on an action taken a hundred times a day animates except the press (MOT-93, D29a). */ --dur-press: 120ms; /* kept */ --dur-ui: 180ms; /* kept */ --dur-sheet: 240ms; /* kept */ --dur-fade: var(--dur-ui); /* an opacity change; 0 under Reduce Motion with everything else (the D29a catch-all, settled by the 13 Sep audit; Apple keeps fades there, MOT-101: a departure, 03 section 9) */ --exit-scale: 0.8; /* an exit is 20 percent shorter (MOT-52) and runs back along the entry path (MOT-76) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* entering (kept name and value) */ --ease-exit: cubic-bezier(0.32, 0.72, 0, 1); /* leaving: the curve Kowalski fits to the iOS sheet (MOT-57) */ /* settle: the sheet detent spring, response 0.344 s, damping 1.0 (CTL-106, MOT-05), sampled at 32 points (node springs.mjs 0.344 0 32); springs.mjs settles it to 0.1 percent in 506 ms, which matches Core Animation's own settling duration for it (0.5058 s, CTL-106) */ --spring-settle-dur: 506ms; --spring-settle: linear(0, 0.0345, 0.1146, 0.2153, 0.3211, 0.4233, 0.5169, 0.5998, 0.6716, 0.7325, 0.7835, 0.8258, 0.8605, 0.8887, 0.9116, 0.9299, 0.9447, 0.9564, 0.9658, 0.9732, 0.979, 0.9836, 0.9872, 0.99, 0.9923, 0.994, 0.9953, 0.9964, 0.9972, 0.9978, 0.9983, 0.9987, 1); /* follow: after a gesture that carried momentum, damping 0.8 (bounce 0.2: MOT-06, MOT-22); the 0.4 s duration is Belphor's own (Gitter's third-party momentum release is 0.8 at 0.3 s, MOT-149); 1.5 percent overshoot, 540 ms */ --spring-follow-dur: 540ms; --spring-follow: linear(0, 0.0201, 0.0716, 0.1436, 0.2274, 0.3164, 0.4058, 0.492, 0.5728, 0.6465, 0.7125, 0.7704, 0.8203, 0.8627, 0.8982, 0.9273, 0.9508, 0.9694, 0.9838, 0.9947, 1.0026, 1.0082, 1.0118, 1.014, 1.015, 1.0151, 1.0147, 1.0138, 1.0126, 1.0113, 1.0099, 1.0086, 1.0073, 1.0061, 1.005, 1.0041, 1.0032, 1.0025, 1.0019, 1.0014, 1); --press-scale: 0.97; /* MOT-54, CTL-133; the D29a press, unchanged */ --dur-pulse: 1600ms; /* the one loading pulse (the skeleton, D29a): it signals live waiting, so it may loop */ --dur-live: 2400ms; /* the live dot's ring (pulseRing), a kept loop: it is live data (03-tokens.md section 7); the same in light */ --dur-glide: 200ms; /* ruling 13 (12 Oct 2026): the Analytics map's view glide, kept as it works, its 200 ms a token so the page carries no free value; the reduced-motion hook snaps it there */ --decay-release: 320ms; /* ruling 13: the globe's release glide, the time constant of its exponential decay */ --dur-spin: 1000ms; /* the pending ring's one turn (ringSpin), a kept loop: activity the person started (03-tokens.md section 7); the same in light */ --ease-pulse: ease-in-out; /* the kept loops, the skeleton pulse and the live dot, keep today's curve (index.css 216 and 1291) */ --hover-brightness: 1.06; /* a filled pill (primary, accent, danger) under a fine pointer only (index.css 352, css-34); a ghost pill takes --fill-2, the accent ghost the recess */ --skeleton-dim: 0.55; /* the pulse's low point */ --disabled-opacity: 0.45; /* one disabled language for every control (D29a), always with its reason printed */ --enter-scale: 0.95; /* MOT-55: never from 0 */ --enter-rise: 8px; /* a centred sheet or a toast rises 8 px as it fades in (D29a) */ --stagger: 40ms; /* a grid's tiles on first load only (Radar, Golden): the 13 Sep audit keeps 30 to 80 */ --stagger-max: 120ms; /* the last tile starts by then, however many there are */ --drag-slop: 10px; /* a drag starts after 10 pt of travel (MOT-01); until then it is a tap */ --momentum-min: 0.3; /* px per ms at release: above it the gesture carried momentum and takes the follow spring (P8); Belphor's own threshold, inferred, no Apple figure published */ /* ---------------------------------------------------------------- 8. Targets and focus (P10) ------------------ */ --hit-min: 44px; /* every touch target (CTL-01, CTL-131) */ --hit-floor: 24px; /* nothing on any input is smaller (WCAG 2.5.8, CTL-129) */ --hit-margin: calc((var(--hit-min) - 1lh) / -2); /* pulls a 44 px box back into a line of text (.inline-44, AST-084) */ --focus-width: 2px; /* WCAG 2.2 SC 2.4.13 asks for at least a 2 CSS px perimeter at 3:1 (CTL-145); today's :focus-visible outline is 2 px */ --focus-offset: 2px; /* today's offset, Belphor's own: the ring clears the control's own edge */ --focus-color: #F2A85A; /* one solid ring for every control (COL-65); replaces three rings (03-tokens.md) */ --focus-color-on-accent: var(--on-accent); /* the same ring on the accent block, where the flame ring falls to 1.0 to 1.8:1; umber holds 4.5:1 and up on every stop (COL-65 asks 3:1) */ } /* ------------------------------------------------------------------ The phone, 390 ------------------------------ */ @media (max-width: 767px) { :root { --inset-sheet: 16px; /* D2.5 */ --page-margin: 16px; /* LAY-01 */ --grid-columns: 4; --type-field-size: 16px; /* TYP-91 */ --chart-h: 240px; /* derived from --inset-sheet, declared again where it changes */ --radius-sheet: calc(var(--radius-control) + var(--inset-sheet)); --radius-in-sheet: max(0px, calc(var(--radius-sheet) - var(--inset-sheet))); --pad-sheet: calc(var(--inset-sheet) - var(--hairline)); } } /* ------------------------------------------------------------------ Density (P11) ------------------------------ A reading page (Landing, the Academy, Auth, Pending) sets data-density="comfortable" on its root; its cards hold their content at 24 from 768 up, so their radius becomes 36 by the same sum. A working page (every app page) never sets it. Components read the tokens and carry no size variant of their own. */ @media (min-width: 768px) { [data-density="comfortable"] { --inset-card: 24px; --radius-card: calc(var(--radius-control) + var(--inset-card)); --radius-in-card: max(0px, calc(var(--radius-card) - var(--inset-card))); --radius-page: calc(var(--radius-card) + var(--inset-page)); --pad-card: calc(var(--inset-card) - var(--hairline)); } } /* ------------------------------------------------------------------ Light (opt-in) ----------------------------- Belphor ships dark only today; every custom colour needs a light variant (COL-152). Ground ivory, cards white, wells a step darker; every text colour held at its floor on the darkest light ground it meets (a fill over the well). Elevation is shadow: one light source above and slightly left, vertical offset twice the horizontal, layered, warm-tinted so it reads as shade on ivory (COL-80, COL-81, COL-83, COL-129). Image tokens stay images. */ :root[data-theme="light"] { --toggle-off: var(--edge-ctl); /* the off track at 3:1 on the white card (3.41:1); --fill-1 is 1.34:1 there, and the white knob needs the track to show (COL-65) */ --bg-1: #F5F2EC; --bg-2: #FFFFFF; --bg-2-fill: linear-gradient(#FFFFFF, #FFFFFF); --bg-3: #FFFFFF; --bg-3-fill: linear-gradient(#FFFFFF, #FFFFFF); --bg-3-hover: linear-gradient(#FBF9F5, #FBF9F5); --bg-well: #EFEBE3; --label-1: #16171A; --label-2: #4B4F57; --label-3: #5C6069; --label-4: #767A82; --fill-1: rgba(22, 23, 26, 0.14); --fill-2: rgba(22, 23, 26, 0.08); --fill-3: rgba(22, 23, 26, 0.05); --fill-4: rgba(22, 23, 26, 0.035); --separator: rgba(22, 23, 26, 0.10); --separator-raised: rgba(22, 23, 26, 0.10); --edge-ctl: rgba(22, 23, 26, 0.5); --flame-ink: #9C4A16; --gold-ink: #7D5F25; --gold-chip: #6F531D; --gain: #4F6825; --loss: #A8382F; --loss-bright: #A8382F; --warning: #7F5710; --info: #45607F; --info-bright: #45607F; --chip-live-ink: #8E4313; --gain-tint: rgba(79, 104, 37, 0.10); --loss-tint: rgba(168, 56, 47, 0.08); --warning-tint: rgba(127, 87, 16, 0.10); --info-tint: rgba(69, 96, 127, 0.08); --live-tint: rgba(156, 74, 22, 0.08); --gold-tint: rgba(125, 95, 37, 0.10); --sim: #1B635F; /* ruling 14: the SIM teal's light ink, 5.12:1 on its tint over every surface and 4.66:1 inside a ghost pill (Golden's Sim buy, --fill-3 over the well), the contrast table */ --sim-tint: rgba(27, 99, 95, 0.10); --thumb-bg: #FFFFFF; --on-thumb: #16171A; --thumb-shadow: 0.5px 1px 2px hsl(30deg 20% 25% / 0.16), 0 0 0 1px rgba(22, 23, 26, 0.06); --ghost-shadow: 0.5px 1px 1px hsl(30deg 20% 25% / 0.08); --toggle-on: #16171A; --toggle-knob-on: #FFFFFF; --toggle-knob-off: #FFFFFF; --well-inset: inset 0 1px 2px rgba(22, 23, 26, 0.08); --elev-1-edge: rgba(22, 23, 26, 0.06); --elev-1-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --elev-1-shadow: 0.5px 1px 1px hsl(30deg 20% 25% / 0.06), 1px 2px 2px hsl(30deg 20% 25% / 0.06); --elev-2-edge: rgba(22, 23, 26, 0.08); --elev-2-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --elev-2-shadow: 0.5px 1px 1px hsl(30deg 20% 25% / 0.05), 1px 2px 2px hsl(30deg 20% 25% / 0.05), 2px 4px 4px hsl(30deg 20% 25% / 0.05), 4px 8px 8px hsl(30deg 20% 25% / 0.05); --elev-3-shadow: 1px 2px 2px hsl(30deg 20% 25% / 0.05), 2px 4px 4px hsl(30deg 20% 25% / 0.05), 4px 8px 8px hsl(30deg 20% 25% / 0.05), 8px 16px 16px hsl(30deg 20% 25% / 0.05), 16px 32px 32px hsl(30deg 20% 25% / 0.05); --mat-chrome-bg: rgba(245, 242, 236, 0.62); --mat-chrome-filter: blur(24px) saturate(1.4); --mat-chrome-edge: rgba(22, 23, 26, 0.08); --mat-chrome-nofilter: rgba(245, 242, 236, 0.96); --mat-chrome-solid: #F5F2EC; --mat-sheet-bg: rgba(255, 255, 255, 0.78); --mat-sheet-filter: blur(24px) saturate(1.4); --mat-sheet-edge: rgba(22, 23, 26, 0.08); --mat-sheet-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --mat-sheet-nofilter: rgba(255, 255, 255, 0.97); --mat-sheet-solid: #FFFFFF; --scrim-bg: rgba(22, 23, 26, 0.32); --scrim-nofilter: rgba(22, 23, 26, 0.5); --scrim-reduced: rgba(22, 23, 26, 0.6); --focus-color: #9C4A16; } /* ------------------------------------------------------------------ Preferences ------------------------------- Each block names the light theme too: :root[data-theme="light"] outranks :root, so a preference written for :root alone would never reach the light theme. */ @media (prefers-reduced-motion: reduce) { :root, :root[data-theme="light"] { /* Reduce Motion: everything sets in one frame, fades included. The D29a catch-all in index.css does this for every element and the 13 Sep audit settled it; these values say the same to anything that reads a token. Apple keeps an opacity fade (MOT-99 to MOT-101); Belphor's settled rule is stricter (03-tokens.md section 9). */ --dur-press: 0ms; --dur-ui: 0ms; --dur-sheet: 0ms; --spring-settle-dur: 0ms; --spring-follow-dur: 0ms; --spring-follow: var(--spring-settle); --press-scale: 1; --enter-scale: 1; --enter-rise: 0px; --dur-fade: 0ms; --stagger: 0ms; --stagger-max: 0ms; } } @media (prefers-reduced-transparency: reduce) { :root, :root[data-theme="light"] { --mat-chrome-bg: var(--mat-chrome-solid); --mat-chrome-filter: none; --mat-sheet-bg: var(--mat-sheet-solid); --mat-sheet-filter: none; --scrim-bg: var(--scrim-reduced); --scrim-filter: none; } } @media (prefers-contrast: more) { :root { /* Increase Contrast: stronger edges and the two fainter labels a step up (COL-92, COL-153) */ --separator: rgba(255, 255, 255, 0.25); --separator-raised: rgba(255, 255, 255, 0.25); --edge-ctl: rgba(255, 255, 255, 0.6); --label-3: #A9ADB6; --label-4: #8A8E96; --focus-width: 3px; --on-gold-line: rgba(26, 18, 2, 0.4); } :root[data-theme="light"] { --separator: rgba(22, 23, 26, 0.25); --separator-raised: rgba(22, 23, 26, 0.25); --elev-1-edge: rgba(22, 23, 26, 0.25); --elev-2-edge: rgba(22, 23, 26, 0.25); --edge-ctl: rgba(22, 23, 26, 0.7); --label-3: #4B4F57; --label-4: #5C6069; --focus-width: 3px; } } /* ------------------------------------------------------------------ The continuous corner, optional ------------ Chromium 139 and later draw corner-shape (RAD-28 to RAD-31); Safari and Firefox release builds do not (RAD-95, RAD-96), so the iPhone home-screen app keeps the plain arc. A box opts in with the class .continuous AND its own --radius (for example --radius: var(--radius-control)); it then takes the closest CSS superellipse to Apple's corner, superellipse(1.38) at 1.24 times that radius, within 0.0031 r of it (RAD-99). Without --radius the rule does nothing, and every browser without the function ignores the block and draws the arc at r, within 0.0138 r (RAD-10). */ @supports (corner-shape: superellipse(1.38)) { .continuous { corner-shape: superellipse(1.38); border-radius: calc(var(--radius) * 1.24); } }