/* tokens.css — the one source of every visual decision (docs/34 §2–3).
The look the owner chose on 13.10.2026: deep petrol grounds, ONE brass
accent, ivory text; Heebo in three weights (200 / 300 / 500); thin lines
instead of filled cards — a control is open text over a line, and the line
is the level. No white, no blue, no drop shadow.
The dark petrol set is the product's default and lives on :root; the light
set is a designed daylight variant of the same family (ivory ground, petrol
ink, brass darkened as far as AA asks) under [data-theme="light"]. "לפי
המכשיר" is resolved by the script (core.js prefs.apply) to one of the two,
so each colour is written once per theme and the two never drift.
Every text pair is measured (docs/34 §3.4; TestNewUIContrast keeps it).
Text size: [data-size="125"|"150"] on . */
/* ---- the typeface: shipped with the product, never fetched from outside.
Heebo, SIL Open Font License 1.1 (fonts/OFL.txt). The Hebrew and the Latin
glyphs are separate files; a browser takes only the ones a page uses. ---- */
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/ui/fonts/heebo-hebrew-200-normal.woff2") format("woff2");
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/ui/fonts/heebo-latin-200-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/ui/fonts/heebo-hebrew-300-normal.woff2") format("woff2");
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/ui/fonts/heebo-latin-300-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/ui/fonts/heebo-hebrew-500-normal.woff2") format("woff2");
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: "Heebo";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/ui/fonts/heebo-latin-500-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: dark;
/* ---- type: one family. Large and light for a number or a title, 300 for
everything that is read, 500 for the few words that lead (a label, the
open tab, the one primary action). Weight 200 only from --fs-xl (26 px)
up: thinner strokes do not hold at reading sizes. */
--font-body: "Heebo", system-ui, "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
--font-display: var(--font-body);
--font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
--fs-xs: 0.75rem; /* 12 — a spaced label, a caption */
--fs-sm: 0.875rem; /* 14 — the quiet second line */
--fs-md: 1rem; /* 16 — body */
--fs-lg: 1.25rem; /* 20 — the name of a row, a device, a scene */
--fs-xl: 1.625rem; /* 26 — the title of a sheet, a dialog, a screen */
--fs-2xl: 2.25rem; /* 36 — a number on a control, a screen's title on a wide screen */
--fs-3xl: 3.25rem; /* 52 — the one number of a device sheet */
--lh: 1.5;
--lh-tight: 1.2;
--fw-light: 200;
--fw-regular: 300;
--fw-medium: 500;
--fw-semibold: 500; /* the family has three weights: "bold" is 500 */
--fw-bold: 500;
--ls-label: 0.2em; /* the small spaced label */
--ls-brand: 0.14em; /* the house's name */
/* ---- space */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
/* ---- shape: lines are 1 px; what is round is fully round */
--r-sm: 6px; /* a tick box */
--r-md: 14px; /* a picture's frame, a menu */
--r-lg: 20px;
--r-xl: 26px; /* a sheet, a dialog */
--r-pill: 999px; /* a button, a chip, a toast */
--line: 1px;
--line-level: 2px; /* the part of a line that says "this much" */
/* ---- touch */
--tap: 48px;
--tap-sm: 44px;
--icon: 24px;
--icon-stroke: 1.3;
/* ---- motion: calm. A press answers at once; a state settles; a layer
rises. --t-out is what leaves the screen: the script removes it after
200 ms (ui.js), so it never runs longer. */
--t-fast: 160ms;
--t-base: 300ms;
--t-slow: 450ms;
--t-glow: 800ms; /* a light that comes up or dies down: the plan of the house */
--t-out: 180ms;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
/* ---- layout */
--page-max: 1200px;
--gutter: 20px;
--header-h: 56px;
--nav-h: 56px;
--rail-w: 232px;
--sheet-max: 640px;
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-t: env(safe-area-inset-top, 0px);
/* ---- colour, dark petrol (the default) ----------------------------- */
/* grounds */
--canvas: #10302f; /* the page */
--canvas-2: #17403e; /* the light at the top of the page */
--raised: #17403e; /* what floats: sheet, dialog, toast, menu */
--raised-2: #1d4b48; /* a step above it: the frame of a sample, a pressed row */
--wash: rgba(241, 234, 217, 0.06); /* under the pointer, on any ground */
--wash-2: rgba(241, 234, 217, 0.1); /* under the finger */
--room: rgba(241, 234, 217, 0.03); /* the floor of a room on the plan of the house */
/* a picture's frame is dark in both themes; what stands on it takes these */
--camera: #0a1f1e;
--camera-ink: #f1ead9;
--camera-ink-2: rgba(241, 234, 217, 0.72);
--camera-ink-3: rgba(241, 234, 217, 0.52);
--camera-line: rgba(241, 234, 217, 0.5);
--camera-line-2: rgba(241, 234, 217, 0.26);
--camera-wash: rgba(241, 234, 217, 0.1);
--camera-accent: #c9a45c;
--camera-live: #f69c8d;
--camera-veil: rgba(10, 31, 30, 0.72); /* under words that stand on a picture */
--overlay: rgba(8, 26, 25, 0.74); /* behind a sheet or a dialog */
/* text */
--ink: #f1ead9; /* ivory */
--ink-2: rgba(241, 234, 217, 0.7); /* the quiet second line */
--ink-3: rgba(241, 234, 217, 0.52); /* a mark, an arrow, an icon at rest — never text */
/* lines */
--hairline: rgba(241, 234, 217, 0.16); /* between rows and groups */
--hairline-strong: rgba(241, 234, 217, 0.26); /* a quiet outline that is not a control */
--control-line: rgba(241, 234, 217, 0.5); /* the line of a control: a field, a switch, a button, a track */
--float-line: rgba(201, 164, 92, 0.24); /* the edge of what floats */
/* the one accent: brass */
--accent: #c9a45c;
--accent-hover: #d6b470;
--accent-ink: #10302f; /* text on brass */
--accent-soft: rgba(201, 164, 92, 0.14); /* the halo of a thumb */
/* "on" is light: an amber glow under what is lit. The control itself is brass. */
--on: #de8428;
--on-ink: #c9a45c;
--glow-0: rgba(222, 132, 40, 0.3); /* the heart of a light with no words on it */
--glow-1: rgba(222, 132, 40, 0.16); /* the most light that words stand on */
--glow-2: rgba(214, 150, 63, 0.08);
--glow: radial-gradient(ellipse 62% 96% at 50% 100%, var(--glow-1) 0%, var(--glow-2) 48%, transparent 100%);
--glow-spot: radial-gradient(closest-side, var(--glow-0) 0%, var(--glow-2) 60%, transparent 100%);
/* a lit room on the plan of the house: a pool of light in the middle of the
room. Its name stands in the heart of it, in --ink only (docs/34 §3.4). */
--glow-room: radial-gradient(ellipse 74% 80% at 50% 46%, var(--glow-0) 0%, var(--glow-1) 36%, var(--glow-2) 70%, transparent 100%);
/* states — each also has its own icon, shape or word (docs/34 §3.1) */
--ok: #8fd1a6;
--warn: #f2a65a;
--danger: #f69c8d; /* refused */
--offline: #b0bbb7; /* not answering: no colour of its own, a dashed line */
--focus-ring: #f1ead9;
--page-glow: radial-gradient(ellipse 120vw 80vh at 50vw 0, var(--canvas-2) 0%, var(--canvas) 62%);
--skeleton: linear-gradient(90deg, var(--wash) 0%, var(--wash-2) 50%, var(--wash) 100%);
--chevron: url("data:image/svg+xml;utf8,");
/* the colour-temperature scale of a lamp: warm at the start, cool at the end */
--temp-warm: #e9a04a;
--temp-mid: #f1ead9;
--temp-cool: #cfe0dc;
}
/* ---- light: daylight in the same house. Ivory ground, petrol ink, brass
darkened until it reads. Not an inversion: the grounds stay warm, what
floats is a lighter ivory, and nothing is white. ---- */
:root[data-theme="light"] {
color-scheme: light;
--canvas: #f1ead9;
--canvas-2: #f7f2e5;
--raised: #f8f4e9;
--raised-2: #e9e0cb;
--wash: rgba(16, 48, 47, 0.05);
--wash-2: rgba(16, 48, 47, 0.09);
--room: rgba(16, 48, 47, 0.03);
--overlay: rgba(16, 48, 47, 0.46);
--ink: #10302f;
--ink-2: rgba(16, 48, 47, 0.74);
--ink-3: rgba(16, 48, 47, 0.6);
--hairline: rgba(16, 48, 47, 0.16);
--hairline-strong: rgba(16, 48, 47, 0.28);
--control-line: rgba(16, 48, 47, 0.6);
--float-line: rgba(119, 87, 25, 0.3);
--accent: #775719;
--accent-hover: #5f4511;
--accent-ink: #f8f4e9;
--accent-soft: rgba(119, 87, 25, 0.14);
--on: #e08a2c;
--on-ink: #775719;
--glow-0: rgba(224, 138, 44, 0.34);
--glow-1: rgba(224, 138, 44, 0.2);
--glow-2: rgba(224, 138, 44, 0.09);
--ok: #27613f;
--warn: #934500;
--danger: #9f2d1b;
--offline: #4f5d5b;
--focus-ring: #10302f;
--chevron: url("data:image/svg+xml;utf8,");
--temp-warm: #d98a2b;
--temp-mid: #f8f4e9;
--temp-cool: #b9d0cb;
}
/* ---- text size: 100 / 125 / 150, for homes with older people (docs/05 §10) */
:root[data-size="125"] { font-size: 125%; }
:root[data-size="150"] { font-size: 150%; }
/* ---- reduced motion: nothing moves, nothing shimmers */
@media (prefers-reduced-motion: reduce) {
:root {
--t-fast: 0ms;
--t-base: 0ms;
--t-slow: 0ms;
--t-glow: 0ms;
--t-out: 0ms;
}
}