/* tokens.css - bind.com colour and type tokens (R319/s312 SESSION-BIND; brief items 12, 21, 23, 27, 43). ONE rule for every colour in this file: each RGB channel sits on the goldenratiocolors ladder {0,14,37,60,97,158,195,218,241,255} and the value carries its grc code (0-based rung per channel; 0,97,255 = grc049). Three families, three layers each (primitive -> semantic -> component): WALL (--dawn-* -> --w-*) the MERIDIAN dawn of reference/meridian-landing/gate.css: its oklch tokens converted to sRGB (OKLab -> linear sRGB -> gamma) and snapped per channel; the snap distance is on every line. DOOR (--hall-* -> --d-*) ONE hallway palette picked by data from tools/palette/palettes.json: the highest accent_on_ground among warm grounds (warm = OKLCH hue in [0,120) and chroma >= 0.02; the canvas template excluded). Winner: hallway "Screenshot 2026-08-28 at 11.33.45 PM.png", accent_on_ground 7.93:1 (runner-up 11.42.34 PM, accent_on_ground 7.38:1). Re-derived by tools/palette/protocol.py --ledger and tests/palette-gate.mjs. CANVAS (--field-* -> --c-*) the dark field of /os/ from the canvas template "Screenshot 2026-08-28 at 4.28.21 PM.png": ground / surface / light swatches, mono label ink = the light swatch. Scheme-invariant by design (a dark field is the template); the light scheme lifts the grounds one rung so the field is never OLED black beside a light page, and the inks TWO (--field-bright is the top rung they need) because the rung the raised tile lands on (97) is a far larger luminance step than the rung the ink leaves (218) - so every canvas ink still clears its floor on --c-raised, pair by pair, which is what the gate asserts. :root = LIGHT. @media (prefers-color-scheme: dark) = DARK. Forced colours map every semantic token to a system colour; each family's filled control - the accent pair --*-accent / --*-on-accent - wears the OS button pair ButtonFace / ButtonText (the fill contract, see the forced block). Contrast figures in the comments are WCAG 2.x and every one of them is a CLAIM THE GATE RECOMPUTES. A figure is written "N.NN:1 on --token" (this line's own token against that one), or "--fg on --bg N.NN:1" when the pair is not this line's, or "accent_on_ground N.NN:1" for the door pick's own metric out of tools/palette/palettes.json. A figure that names no pair, or that misses the computed value by more than 0.005, turns tests/palette-gate.mjs RED - so no printed number here can drift away from the colours above it. Scene primitives (the sky and sea) do not change with the scheme: the dawn is the dawn; only the semantic layer flips. Fonts: vendored /fonts/ only (no external origin). Never the plain vh unit anywhere in the estate (ASL Law 1). */ /* ---- vendored faces (OFL 1.1 each; the licence text ships in fonts/OFL-inter.txt) ------------------------------ */ @font-face { font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Archivo Narrow"; src: url("fonts/archivo-narrow.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Comfortaa"; src: url("fonts/comfortaa-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Comfortaa"; src: url("fonts/comfortaa-700.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { color-scheme: light dark; /* ==== PRIMITIVES - WALL: the MERIDIAN dawn, snapped (gate.css :root; "raw" = the converted sRGB triplet) ======= */ --dawn-sky-zenith: #daf1ff; /* grc789 oklch(96.5% 0.025 225) raw 227,248,255 snap 11.4 */ --dawn-sky-high: #daf1ff; /* grc789 oklch(95% 0.04 213) raw 209,246,255 snap 10.3 (lands on the zenith rung) */ --dawn-sky-mid: #c3f1ff; /* grc689 oklch(94% 0.055 200) raw 193,247,250 snap 8.1 */ --dawn-horizon: #ffffda; /* grc997 oklch(99% 0.035 95) raw 255,252,226 snap 8.5 the seam bloom, the white of unlock */ --dawn-sea-near: #c3f1f1; /* grc688 oklch(92% 0.06 180) raw 186,242,230 snap 14.2 */ --dawn-sea-far: #f1ffda; /* grc897 oklch(97% 0.03 120) raw 242,249,226 snap 10.0 */ --dawn-pulse: #61f1c3; /* grc486 oklch(86% 0.135 165) raw 110,237,187 snap 15.8 caret, unlock streaks */ --dawn-you: #9e9e9e; /* grc555 oklch(70% 0.01 0) raw 164,156,158 snap 6.3 the one desaturated point */ --dawn-ink: #253c3c; /* grc233 oklch(32% 0.05 250) raw 30,53,75 snap 18.0 primary text, 9.69:1 on --dawn-sky-mid */ --dawn-ink-soft: #3c6161; /* grc344 oklch(46% 0.045 250) raw 69,90,113 snap 19.6 secondary text, 5.64:1 on --dawn-sky-mid */ --dawn-deny: #9e2525; /* grc522 oklch(50% 0.17 30) raw 175,44,31 snap 19.3 6.32:1 on --dawn-sky-mid */ --dawn-night: #0e2525; /* grc122 not in gate.css: the ink family one rung deeper = the sky before dawn (dark ground) */ --dawn-mist: #9ec3da; /* grc567 dark-scheme secondary ink, 8.60:1 on --dawn-night */ --dawn-dusk: #619e9e; /* grc455 dark-scheme rule and dim, 5.26:1 on --dawn-night */ --dawn-deny-soft: #f19e9e; /* grc855 dark-scheme deny, 7.73:1 on --dawn-night */ --dawn-white: #ffffff; /* grc999 */ /* ==== PRIMITIVES - DOOR: hallway 11.33.45 PM (share = fraction of sampled pixels; raw = the k-means centroid) === */ --hall-ground: #3c3c25; /* grc332 share .553 over three centroids raw 65,61,38 snap 5.2 roles.ground */ --hall-light: #dadac3; /* grc776 share .425 raw 225,213,192 snap 9.1 roles.light AND roles.accent (7.93:1 on --hall-ground = the pick) */ --hall-olive: #61613c; /* grc443 share .013 raw 127,110,75 snap 36.0 the brass rail, snapped */ --hall-grey: #9e9e9e; /* grc555 share .008 raw 176,162,128 snap 35.2 the lit brass, snapped */ --hall-deep: #25250e; /* grc221 the ground one rung down: the recess (--hall-light on --hall-deep 10.96:1) */ --hall-brass: #c3c39e; /* grc665 the brass at the rung that reads: 6.23:1 on --hall-ground */ --hall-parchment: #f1f1da; /* grc887 the light swatch one rung up: the daylight card */ --hall-dim: #616161; /* grc444 neutral dim, 4.36:1 on --hall-light (large text and marks only) */ --hall-deny: #9e2525; /* grc522 the estate's one alarm red, 5.39:1 on --hall-light */ --hall-deny-soft: #f19e9e; /* grc855 5.43:1 on --hall-ground */ --hall-white: #ffffff; /* grc999 */ /* ==== PRIMITIVES - CANVAS: the template 4.28.21 PM (neutral by data; brand edges come from each room) ============ */ --field-ground: #0e0e0e; /* grc111 share .313 raw 10,10,10 snap 6.9 roles.ground */ --field-surface: #252525; /* grc222 share .280 raw 31,31,32 snap 9.8 roles.surface */ --field-raised: #3c3c3c; /* grc333 share .309 over two centroids raw 74,74,73 / 52,52,54 */ --field-rule: #616161; /* grc444 share .052 raw 126,127,125 snap 50.2 the faceted sphere */ --field-grey: #9e9e9e; /* grc555 */ --field-silver: #c3c3c3; /* grc666 */ --field-light: #dadada; /* grc777 share .045 raw 226,228,228 snap 16.2 roles.light = the mono label ink, 13.81:1 on --field-ground */ --field-white: #f1f1f1; /* grc888 */ --field-bright: #ffffff; /* grc999 the ladder top rung: the light scheme label ink; the dark field never needs it */ --field-deny-soft: #f19e9e; /* grc855 9.31:1 on --field-ground */ /* ==== SEMANTIC - WALL (light: the dawn) ========================================================================== */ --w-paper: var(--dawn-sky-mid); --w-raised: var(--dawn-sky-zenith); /* 1.04:1 on --w-paper: a lift, not a border */ --w-edge: var(--dawn-mist); /* hairline, decorative */ --w-rule: var(--dawn-ink-soft); /* control boundaries, 5.64:1 on --w-paper */ --w-ink: var(--dawn-ink); /* 9.69:1 on --w-paper, 10.06:1 on --w-raised */ --w-ink2: var(--dawn-ink-soft); /* 5.64:1 on --w-paper */ --w-dim: var(--dawn-ink-soft); /* 5.64:1 on --w-paper; the pastel sky admits no lighter text at the 4.5 floor */ --w-accent: var(--dawn-pulse); /* energy: caret, streaks, the filled control */ --w-on-accent: var(--dawn-ink); /* 8.31:1 on --w-accent */ --w-accent2: var(--dawn-ink-soft); /* link text, 5.64:1 on --w-paper */ --w-focus: var(--dawn-ink); /* the ring: --w-accent on --w-paper is 1.17:1, so the ring is ink, 9.69:1 on --w-paper - ASL Law 5 */ --w-deny: var(--dawn-deny); /* 6.32:1 on --w-paper */ --w-on-deny: var(--dawn-white); /* 7.65:1 on --w-deny */ --w-veil: var(--dawn-horizon); /* the crossing: a monotonic white-gold brighten (gate.css .flash) */ --w-hi: rgb(255 255 255 / .382); /* grc999 at .618: the slab lip */ --w-scrim: rgb(255 255 255 / .86); /* grc999: the legibility glow behind gate text (gate.css .gate::before) */ --w-shimmer: rgb(218 255 241 / .28); /* grc798: the sea shimmer band (gate.css .sea) */ --w-sky-zenith: var(--dawn-sky-zenith); --w-sky-high: var(--dawn-sky-high); --w-sky-mid: var(--dawn-sky-mid); --w-horizon: var(--dawn-horizon); --w-sea-near: var(--dawn-sea-near); --w-sea-far: var(--dawn-sea-far); --w-pulse: var(--dawn-pulse); --w-you: var(--dawn-you); --w-seam-y: 62%; /* gate.css --seam-y; the portals move it per scene */ /* ==== SEMANTIC - DOOR (light: the hall in daylight) ============================================================== */ --d-paper: var(--hall-light); --d-raised: var(--hall-parchment); /* the card */ --d-edge: var(--hall-grey); /* hairline, decorative */ --d-rule: var(--hall-olive); /* control boundaries, 4.51:1 on --d-paper */ --d-ink: var(--hall-ground); /* 7.93:1 on --d-paper, 9.83:1 on --d-raised */ --d-ink2: var(--hall-olive); /* 4.51:1 on --d-paper, 5.58:1 on --d-raised */ --d-dim: var(--hall-dim); /* 4.36:1 on --d-paper: marks and large text only */ --d-accent: var(--hall-ground); /* the filled door: olive */ --d-on-accent: var(--hall-light); /* 7.93:1 on --d-accent */ --d-accent2: var(--hall-olive); /* link text, 4.51:1 on --d-paper */ --d-focus: var(--hall-ground); /* 7.93:1 on --d-paper */ --d-deny: var(--hall-deny); /* 5.39:1 on --d-paper */ --d-on-deny: var(--hall-parchment); /* 6.68:1 on --d-deny */ --d-hi: rgb(255 255 255 / .382); /* grc999 */ /* ==== SEMANTIC - CANVAS (light: the grounds one rung up, the inks two) =========================================== */ --c-field: var(--field-surface); /* the page ground under the light scheme */ --c-surface: var(--field-raised); /* a room's inner panel */ --c-raised: var(--field-rule); /* a medallion or a lifted tile; every canvas ink reads on it, --c-dim on --c-raised 4.43:1 the tightest */ --c-edge: var(--field-grey); /* the default hexagon edge, 5.72:1 on --c-field */ --c-rule: var(--field-silver); --c-ink: var(--field-bright); /* 15.33:1 on --c-field, 11.03:1 on --c-surface, 6.19:1 on --c-raised */ --c-ink2: var(--field-white); /* 9.77:1 on --c-surface, 5.48:1 on --c-raised */ --c-dim: var(--field-light); /* 7.89:1 on --c-surface, 4.43:1 on --c-raised */ --c-accent: var(--field-white); --c-on-accent: var(--field-ground); --c-accent2: var(--field-bright); /* link text, 11.03:1 on --c-surface, 6.19:1 on --c-raised */ --c-focus: var(--field-white); --c-deny: var(--field-deny-soft); /* 7.39:1 on --c-field */ --c-on-deny: var(--field-ground); --c-hi: rgb(255 255 255 / .056); /* grc999 at .618^6: the tile lip */ /* ==== TYPE - the pairing ========================================================================================= */ --font-display: "Archivo", "Inter", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; /* the wall's word; 740 */ --font-narrow: "Archivo Narrow", "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; /* the door's one line, tall */ --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-legible: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* the key form, the guide */ --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* labels, eyebrows, the key */ --font-soft: "Comfortaa", "Inter", ui-rounded, system-ui, sans-serif; /* p7's rounded voice, vendored */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-display: 740; --lh-tight: 1; --lh-snug: 1.15; --lh-body: 1.5; --lh-loose: 1.65; --ls-display: -0.022em; --ls-caps: .18em; --ls-eyebrow: .42em; --ls-key: .12em; --ls-body: .005em; --fs--1: .8125rem; --fs-0: 1rem; --fs-1: 1.125rem; --fs-2: 1.375rem; --fs-3: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); --fs-4: clamp(1.75rem, 0.75rem + 5vw, 3.5rem); /* floors sized for a 160 px reflow viewport (200% zoom on a 320 phone) */ --fs-5: clamp(2rem, 0.75rem + 7.5vw, 5.5rem); --fs-6: clamp(2.5rem, 0.5rem + 10vw, 9rem); /* the door's headline, one line */ --measure: 34ch; --measure-wide: 62ch; /* ==== SPACE, RADIUS, TARGETS, SAFE AREA, MOTION (the phi scale of yfile, verbatim) =============================== */ --s0: 6.111px; --s1: 9.889px; --s2: 16px; --s3: 25.889px; --s4: 41.889px; --s5: 67.777px; --s6: 109.666px; --gutter: clamp(16px, 4cqi, 48px); --section: clamp(3rem, 7cqi, 6.5rem); --r1: 9.889px; --r2: 16px; --r3: 25.889px; --r-pill: 999px; --target: 44px; /* ASL Law 5 floor, via min-block-size */ --ctl: 48px; /* a control: over the floor, under the 52 px plate rhythm */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 180ms; --dur-slow: 900ms; --dur-veil: 2200ms; /* the crossing (brief item 5) */ --dur-recede: 1100ms; --dur-breathe: 8s; /* the seam */ /* ==== COMPONENT BRIDGE - yfile's wall module (landing/wall.css, reused not forked) reads --l-* and --yf-*; ====== on bind.com it wears the WALL family. Every portal key form inherits the dawn through these aliases. */ --l-paper: var(--w-paper); --l-raised: var(--w-raised); --l-edge: var(--w-edge); --l-rule: var(--w-rule); --l-ink: var(--w-ink); --l-ink2: var(--w-ink2); --l-dim: var(--w-dim); --l-accent: var(--w-accent); --l-accent2: var(--w-accent2); --l-on-accent: var(--w-on-accent); --l-deny: var(--w-deny); --l-hi: var(--w-hi); --l-veil: var(--w-veil); --l-display: var(--font-display); --l-body: var(--font-legible); --l-mono: var(--font-mono); --yf-s0: var(--s0); --yf-s1: var(--s1); --yf-s2: var(--s2); --yf-s3: var(--s3); --yf-s4: var(--s4); --yf-s5: var(--s5); --yf-r1: var(--r1); --yf-r2: var(--r2); } /* ==== DARK ========================================================================================================= */ @media (prefers-color-scheme: dark) { :root { /* WALL: the sky before dawn - the ink family becomes the ground, the sky becomes the ink; the seam still glows */ --w-paper: var(--dawn-night); --w-raised: var(--dawn-ink); /* 1.37:1 on --w-paper: the slab */ --w-edge: var(--dawn-ink-soft); /* hairline */ --w-rule: var(--dawn-dusk); /* 5.26:1 on --w-paper */ --w-ink: var(--dawn-sky-zenith); /* 13.75:1 on --w-paper, 10.06:1 on --w-raised */ --w-ink2: var(--dawn-mist); /* 8.60:1 on --w-paper, 6.30:1 on --w-raised */ --w-dim: var(--dawn-dusk); /* 5.26:1 on --w-paper, 3.85:1 on --w-raised (marks) */ --w-accent: var(--dawn-pulse); /* 11.36:1 on --w-paper */ --w-on-accent: var(--dawn-night); /* 11.36:1 on --w-accent */ --w-accent2: var(--dawn-pulse); /* link text */ --w-focus: var(--dawn-pulse); /* the ring earns the pulse in the dark: 11.36:1 on --w-paper */ --w-deny: var(--dawn-deny-soft); /* 7.73:1 on --w-paper */ --w-on-deny: var(--dawn-night); /* 7.73:1 on --w-deny */ --w-hi: rgb(255 255 255 / .056); /* grc999 at .618^6 */ --w-scrim: rgb(14 37 37 / .86); /* grc122: the glow becomes a hush behind the gate text */ /* DOOR: the hall as shot */ --d-paper: var(--hall-ground); --d-raised: var(--hall-deep); /* the recess: one rung below the ground, as the wall module cuts its field into the plate */ --d-edge: var(--hall-olive); /* hairline */ --d-rule: var(--hall-brass); /* 6.23:1 on --d-paper */ --d-ink: var(--hall-light); /* 7.93:1 on --d-paper, 10.96:1 on --d-raised, the recess */ --d-ink2: var(--hall-brass); /* 6.23:1 on --d-paper, 8.61:1 on --d-raised */ --d-dim: var(--hall-grey); /* 4.20:1 on --d-paper: marks and large text only */ --d-accent: var(--hall-light); /* the filled door: parchment */ --d-on-accent: var(--hall-ground); /* 7.93:1 on --d-accent */ --d-accent2: var(--hall-brass); /* link text, 6.23:1 on --d-paper */ --d-focus: var(--hall-light); /* 7.93:1 on --d-paper */ --d-deny: var(--hall-deny-soft); /* 5.43:1 on --d-paper */ --d-on-deny: var(--hall-ground); /* 5.43:1 on --d-deny */ --d-hi: rgb(255 255 255 / .056); /* grc999 */ /* CANVAS: the template */ --c-field: var(--field-ground); --c-surface: var(--field-surface); --c-raised: var(--field-raised); /* --c-ink on --c-raised 7.89:1, --c-dim on --c-raised 4.12:1 */ --c-edge: var(--field-rule); /* 3.12:1 on --c-field: a boundary, not text */ --c-rule: var(--field-grey); --c-ink: var(--field-light); /* 13.81:1 on --c-field, 10.96:1 on --c-surface */ --c-ink2: var(--field-silver); /* 8.70:1 on --c-surface, 6.26:1 on --c-raised */ --c-dim: var(--field-grey); /* 7.21:1 on --c-field, 5.72:1 on --c-surface, 4.12:1 on --c-raised */ --c-accent: var(--field-white); --c-on-accent: var(--field-ground); --c-accent2: var(--field-light); /* link text, 10.96:1 on --c-surface, 7.89:1 on --c-raised */ --c-focus: var(--field-white); --c-deny: var(--field-deny-soft); /* 9.31:1 on --c-field */ --c-on-deny: var(--field-ground); } } /* ==== REDUCED MOTION: a hard stop, not a shorter show (ASL Law 6); the veil is a 200 ms cut (brief item 5) ========= */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-slow: 0ms; --dur-veil: 200ms; --dur-recede: 0ms; --dur-breathe: 0s; } } /* ==== FORCED COLOURS: the palette is the OS's; only identity collisions would be ours ============================== THE FILL CONTRACT (r2): a filled control wears the OS button pair ButtonFace / ButtonText in every family, never Highlight / HighlightText. Chromium paints a Canvas backplate behind every text run under forced-colors (unless forced-color-adjust: none, which would also discard the user's palette), and HighlightText EQUALS Canvas in both default forced themes (measured 2026-08-30, chromium 149: dark Canvas = HighlightText = grc000, light = grc999), so a HighlightText label vanishes into its own backplate - the r1 gap: the Open and Enter labels a solid block. Highlight stays the focus ring only (--w-focus, --d-focus, --c-focus): an outline carries no text. The deny pair is deliberately NOT a button pair: deny is worn as text (the refusal line) far more often than as a fill, and CanvasText on Canvas is the readable form of that; one token pair cannot be both readable text and a readable fill here, so a filled deny SURFACE, when a component needs one, declares its own pair at that component. tests/palette-gate.mjs refuses any other fill pair; tests/matrix.mjs FORCED() compares text against the backplate. */ @media (forced-colors: active) { :root { --w-paper: Canvas; --w-raised: Canvas; --w-edge: CanvasText; --w-rule: CanvasText; --w-ink: CanvasText; --w-ink2: CanvasText; --w-dim: GrayText; --w-accent: ButtonFace; --w-on-accent: ButtonText; --w-accent2: LinkText; --w-focus: Highlight; --w-deny: CanvasText; --w-on-deny: Canvas; --w-veil: Canvas; --w-hi: transparent; --w-scrim: Canvas; --w-shimmer: transparent; --d-paper: Canvas; --d-raised: Canvas; --d-edge: CanvasText; --d-rule: CanvasText; --d-ink: CanvasText; --d-ink2: CanvasText; --d-dim: GrayText; --d-accent: ButtonFace; --d-on-accent: ButtonText; --d-accent2: LinkText; --d-focus: Highlight; --d-deny: CanvasText; --d-on-deny: Canvas; --d-hi: transparent; --c-field: Canvas; --c-surface: Canvas; --c-raised: Canvas; --c-edge: CanvasText; --c-rule: CanvasText; --c-ink: CanvasText; --c-ink2: CanvasText; --c-dim: GrayText; --c-accent: ButtonFace; --c-on-accent: ButtonText; --c-accent2: LinkText; --c-focus: Highlight; --c-deny: CanvasText; --c-on-deny: Canvas; --c-hi: transparent; } }