/* ============================================================================
Keranto — design tokens. site/brand/tokens.css
Authored 2026-08-08, current to gtm/decisions/DECISIONS-2026-08-16.md.
Rationale for every value: gtm/IDENTITY.md.
Link this AFTER site/brand/fonts.css (fonts.css declares the @font-face
rules this file's --k-font-* values name; a tokens file holds values, not
fetches — see gtm/IDENTITY.md §5):
Theme is driven by BOTH signals, in this order of authority:
1. prefers-color-scheme (the visitor's OS)
2. :root[data-theme="light"] / [data-theme="dark"] (an explicit toggle,
which must win in both directions)
Every colour pair used for text was checked with WCAG 2.1 contrast maths and
the measured ratio is written next to it. Do not change a hex without
re-checking. The light-theme ratios are measured against the warm paper
#FBF7F2 that decision design-2 (answer Q37, 2026-08-16) makes the brand ground.
The paper is warm (hue 33 deg) and the neutrals are cool (hue ~210 deg), and
that pairing is the decision, not an oversight: --k-ink, --k-muted, --k-line
and --k-line-strong are NOT to be re-tuned warm (gtm/IDENTITY.md section 4).
Do not "brighten" the brand — #B8500C is the exact value at which one orange
is simultaneously AA as text on paper (4.70:1) and AA as a fill under white
text (5.01:1). Almost no orange does both. #C8541E is not shipped anywhere,
and the three-orange system it forces is not built (design-2, 2026-08-16).
============================================================================ */
:root {
color-scheme: light dark;
/* ---- type families -------------------------------------------------------
One family covers Hebrew AND Latin: IBM Plex Sans Hebrew (OFL 1.1).
Measured 2026-08-08 at 400px em: Hebrew letter height 265px vs Latin cap
height 278px = 95%, shared baseline. So Hebrew and Latin sit together at
the SAME font-size — never apply a per-script size fudge.
⚠️ IBM Plex Sans Hebrew ships NO italics. Never italicise Hebrew; the
browser's synthetic oblique is the single loudest "foreign product" tell.
Emphasise with weight or colour instead.
Both faces are SELF-HOSTED as woff2 under site/brand/ (design-8,
2026-08-16), declared with local @font-face in site/brand/fonts.css —
never an @import here, a tokens file holds values, not fetches. Rubik is
in no fallback stack. Run `ls site/brand/*.woff2` for the files present. */
--k-font-sans: "IBM Plex Sans Hebrew", "IBM Plex Sans", "Segoe UI",
"Arial Hebrew", system-ui, -apple-system, Arial, sans-serif;
--k-font-mono: "IBM Plex Mono", "Liberation Mono", ui-monospace,
SFMono-Regular, Menlo, Consolas, monospace;
/* Phone numbers, times, prices, call durations. Tabular by construction. */
--k-font-num: var(--k-font-mono);
--k-weight-regular: 400;
--k-weight-medium: 500;
--k-weight-semi: 600;
--k-weight-bold: 700; /* the heaviest weight that exists in the Hebrew */
/* ---- type scale (ratio ~1.2, hand-corrected at the small end) ---------- */
--k-text-2xs: 11px; /* system labels, tracked +0.16em, uppercase Latin only */
--k-text-xs: 13px;
--k-text-sm: 15px;
--k-text-base: 17px; /* body. Hebrew reads small; do not go below 16px. */
--k-text-lg: 19px;
--k-text-xl: 23px;
--k-text-2xl: 28px;
--k-text-3xl: 34px;
--k-text-display: clamp(34px, 6.4vw, 64px);
--k-lh-tight: 1.12; /* display only */
--k-lh-snug: 1.30; /* headings */
--k-lh-base: 1.60; /* body. Hebrew has no ascender/descender rhythm to
guide the eye, so it needs the extra leading. */
--k-lh-loose: 1.75;
--k-tracking-tight: -0.02em; /* display Latin only — never track Hebrew
negative, it collapses the counters. */
--k-tracking-normal: 0;
--k-tracking-label: 0.16em;
/* ---- spacing (4px base) ----------------------------------------------- */
--k-space-0: 0;
--k-space-1: 2px;
--k-space-2: 4px;
--k-space-3: 6px;
--k-space-4: 8px;
--k-space-5: 12px;
--k-space-6: 16px;
--k-space-7: 20px;
--k-space-8: 24px;
--k-space-9: 32px;
--k-space-10: 40px;
--k-space-11: 48px;
--k-space-12: 64px;
--k-space-13: 80px;
--k-space-14: 96px;
--k-measure: 62ch; /* max line length for body copy */
--k-wrap: 1080px; /* page gutter width */
/* ---- radii ------------------------------------------------------------ */
--k-radius-xs: 2px;
--k-radius-sm: 4px;
--k-radius-md: 6px; /* buttons, inputs */
--k-radius-lg: 10px; /* message bubbles */
--k-radius-xl: 14px; /* cards, panels */
--k-radius-pill: 999px;
--k-radius-plate: 21.875%; /* the logo plate: 14/64. Keep as a % so the mark
stays self-similar at every size. */
/* ---- motion ----------------------------------------------------------- */
--k-dur-fast: 120ms;
--k-dur: 180ms;
--k-dur-slow: 340ms;
--k-ease: cubic-bezier(0.22, 0.70, 0.30, 1); /* decelerate; default */
--k-ease-in: cubic-bezier(0.55, 0.05, 0.90, 0.35);
/* Nothing on a Keranto surface may animate for longer than --k-dur-slow.
This product's job is to reduce a suspicious buyer's anxiety; movement
that outlasts a glance reads as a toy. */
/* ---- z layers --------------------------------------------------------- */
--k-z-base: 0;
--k-z-sticky: 10;
--k-z-overlay: 100;
--k-z-toast: 200;
}
/* ==========================================================================
LIGHT — the default. Warm paper (design-2 / Q37, 2026-08-16).
========================================================================== */
:root {
--k-paper: #FBF7F2; /* page. Hue 33°, HSV saturation 3.6%, L* 97.4 —
warm paper under daylight, which is where this
buyer stands (design-2 / Q37, 2026-08-16). */
--k-surface: #FFFFFF; /* cards, the WhatsApp-bubble analogue */
--k-surface-sunk:#EDEFF2; /* wells, inset rows */
--k-ink: #12171C; /* 16.90:1 on paper — primary text */
--k-muted: #5A6673; /* 5.50:1 on paper — secondary text */
--k-line: #DBE0E6; /* hairline separators (decorative) */
--k-line-strong: #848D96; /* 3.16:1 on paper — meaningful UI boundaries,
input borders, focus rings (WCAG 1.4.11) */
--k-brand: #B8500C; /* 4.70:1 on paper · 5.01:1 under white text */
--k-brand-hover: #A0450A;
--k-on-brand: #FFFFFF; /* the ONLY text colour permitted on a brand fill.
Confirmed without a carve-out 2026-08-16
(design-13 / Q38): the phone glyph inside the
orange primary button is WHITE, and green
survives only in the state chip beside it. */
--k-brand-wash: #FDF3EB; /* brand text on this wash = 4.58:1.
⚠️ Measured 2026-08-16: this wash is ΔE76 = 2.8
from the paper, i.e. inside the distance
gtm/IDENTITY.md §2 calls "the same colour". It
passes as a text background but does not read as
a distinct block. Darkening it is the owner's
call — gtm/IDENTITY.md §10. */
/* Semantic. Held apart from the accent on purpose: the accent says
"Keranto", these three say "what happened to the call". */
--k-ok: #0B6B3A; /* 6.19:1 — the call you kept */
--k-ok-wash: #E6F2EB; /* ok text on wash = 5.75:1 */
--k-warn: #7A5600; /* 6.23:1 — needs your attention, not broken */
--k-warn-wash: #F6EFDC; /* warn text on wash = 5.79:1 */
--k-crit: #AE1F2E; /* 6.49:1 — the call you lost */
--k-crit-wash: #FBE9EB; /* crit text on wash = 5.92:1 */
--k-shadow-1: 0 1px 2px rgba(18, 23, 28, 0.06);
--k-shadow-2: 0 2px 4px rgba(18, 23, 28, 0.06), 0 8px 20px rgba(18, 23, 28, 0.05);
--k-shadow-3: 0 4px 8px rgba(18, 23, 28, 0.07), 0 18px 40px rgba(18, 23, 28, 0.08);
--k-focus-ring: 0 0 0 3px rgba(184, 80, 12, 0.32);
}
/* ==========================================================================
DARK — from the OS.
Shadows barely exist on a dark ground, so depth comes from a lighter
surface plus --k-line. Do not compensate with heavier shadows.
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
--k-paper: #0E1216;
--k-surface: #171D24;
--k-surface-sunk:#0A0E11;
--k-ink: #E8EDF2; /* 15.96:1 on paper */
--k-muted: #9AA6B2; /* 7.59:1 on paper */
--k-line: #27313A;
--k-line-strong: #5F6B75; /* 3.44:1 on paper */
--k-brand: #F0913F; /* 7.90:1 on paper */
--k-brand-hover: #F7A660;
--k-on-brand: #14181C; /* dark text on the light-orange fill = 7.50:1
(measured 2026-08-16). White on it is 2.38:1
and is forbidden. Do not confuse 7.50 with the
7.90 above: that is the orange's own ratio
against the dark paper, a different pair. */
--k-brand-wash: #2A1A0E; /* brand text on wash = 7.05:1 */
--k-ok: #3FBE86; /* 7.99:1 */
--k-ok-wash: #12251C; /* ok text on wash = 6.82:1 */
--k-warn: #E3B14B; /* 9.54:1 */
--k-warn-wash: #241D0F; /* warn text on wash = 8.47:1 */
--k-crit: #F07B6D; /* 6.95:1 */
--k-crit-wash: #2A1618; /* crit text on wash = 6.33:1 */
--k-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--k-shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5);
--k-shadow-3: 0 8px 28px rgba(0, 0, 0, 0.6);
--k-focus-ring: 0 0 0 3px rgba(240, 145, 63, 0.36);
}
}
/* --- explicit toggle. Repeated rather than nested so that an attribute set
by the user always beats the OS, in BOTH directions. ----------------- */
:root[data-theme="light"] {
--k-paper:#FBF7F2; --k-surface:#FFFFFF; --k-surface-sunk:#EDEFF2;
--k-ink:#12171C; --k-muted:#5A6673; --k-line:#DBE0E6; --k-line-strong:#848D96;
--k-brand:#B8500C; --k-brand-hover:#A0450A; --k-on-brand:#FFFFFF; --k-brand-wash:#FDF3EB;
--k-ok:#0B6B3A; --k-ok-wash:#E6F2EB;
--k-warn:#7A5600; --k-warn-wash:#F6EFDC;
--k-crit:#AE1F2E; --k-crit-wash:#FBE9EB;
--k-shadow-1: 0 1px 2px rgba(18,23,28,.06);
--k-shadow-2: 0 2px 4px rgba(18,23,28,.06), 0 8px 20px rgba(18,23,28,.05);
--k-shadow-3: 0 4px 8px rgba(18,23,28,.07), 0 18px 40px rgba(18,23,28,.08);
--k-focus-ring: 0 0 0 3px rgba(184,80,12,.32);
color-scheme: light;
}
:root[data-theme="dark"] {
--k-paper:#0E1216; --k-surface:#171D24; --k-surface-sunk:#0A0E11;
--k-ink:#E8EDF2; --k-muted:#9AA6B2; --k-line:#27313A; --k-line-strong:#5F6B75;
--k-brand:#F0913F; --k-brand-hover:#F7A660; --k-on-brand:#14181C; --k-brand-wash:#2A1A0E;
--k-ok:#3FBE86; --k-ok-wash:#12251C;
--k-warn:#E3B14B; --k-warn-wash:#241D0F;
--k-crit:#F07B6D; --k-crit-wash:#2A1618;
--k-shadow-1: 0 1px 2px rgba(0,0,0,.5);
--k-shadow-2: 0 2px 6px rgba(0,0,0,.5);
--k-shadow-3: 0 8px 28px rgba(0,0,0,.6);
--k-focus-ring: 0 0 0 3px rgba(240,145,63,.36);
color-scheme: dark;
}
/* ==========================================================================
The four utilities that are correctness, not taste.
Everything else belongs in the page's own stylesheet.
========================================================================== */
/* A Latin/number run inside Hebrew must be bidi-isolated or the browser puts
the digits, the dashes and the +972 in the wrong order. PRODUCT.md §7 calls
this a correctness bug, and it is: a wrong phone number is a lost job. */
.k-num, .k-tel, .k-ltr {
font-family: var(--k-font-num);
font-variant-numeric: tabular-nums;
unicode-bidi: isolate;
direction: ltr;
letter-spacing: 0.01em;
/* Isolation fixes the ORDER; it does not stop a line break mid-number.
Observed 2026-08-08 in site/brand/preview.html: an isolated "2026-08-08"
still wrapped as "2026-08" / "08". A phone number split across two lines is
the same class of defect as a reordered one. */
white-space: nowrap;
}
/* Small system labels. Uppercase is a Latin-only feature — Hebrew has no case,
so never set text-transform on Hebrew text. IBM Plex Mono carries no Hebrew
either, so the default family here is the sans and the mono is scoped to the
Latin case with the uppercase (design-8, 2026-08-16). A Hebrew label set in
the mono falls back to whatever the OS supplies, which is the defect. */
.k-label {
font-family: var(--k-font-sans);
font-size: var(--k-text-2xs);
letter-spacing: var(--k-tracking-label);
color: var(--k-muted);
}
.k-label:lang(en) {
font-family: var(--k-font-mono);
text-transform: uppercase;
}
.k-focus-visible:focus-visible,
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--k-brand);
outline-offset: 2px;
border-radius: var(--k-radius-xs);
}
@media (prefers-reduced-motion: reduce) {
:root { --k-dur-fast: 1ms; --k-dur: 1ms; --k-dur-slow: 1ms; }
}