/* tokens.css: DN Edit design tokens (owner DS, PRODUCT_V2 2.3 + 11.3). One set of tokens for every page, EN + AR. Variable NAMES are frozen (11.1 #4): change a value freely, rename or remove a name only through a CR to DS + INT. Loaded first by base.css (@import), so every page that links base.css has them. Rules (docs/v2/design-system.md has the long version): - Ink + white + one red. Red fills only the one primary button per screen, live dots and selection badges; red TEXT always uses --red-2 (5.94:1 on --bg). Status colours (--ok, --warn) are for small marks, never large fills. - Text tokens (--fg, --fg-2, --fg-3, --red-2, --ok, --warn) pass WCAG AA 4.5:1 on every surface token --bg..--ink-4; --line-field and --focus pass 3:1 (tests/ds-unit.mjs checks every pair). - Edges are drawn with inset box-shadows (--edge*), never borders, so hover/selected never shifts layout. - Radii come only from --r-xs .. --r-pill. Nested radius = outer radius minus the padding between them. - Arabic: html[lang=ar] below swaps families, the type scale and tracking (R-AR §4, PRODUCT_V2 6.3). Element-level :lang(ar) resets (letter-spacing, uppercase, italic, synthetic bold) live in AR's ar.css. */ :root{ color-scheme:dark; /* ---------- colour: surfaces (darkest -> lightest) ---------- */ --bg:#060606; /* page */ --ink-1:#0c0c0c; /* sunken: sticky bar, player well, code fields */ --ink-2:#121212; /* card */ --ink-3:#191919; /* raised: sheet, menu, input, toast */ --ink-4:#212121; /* hover on raised */ --ink-5:#2b2b2b; /* pressed / selected fill (only --fg and --fg-2 text on it) */ --glass:rgba(16,16,16,.74); /* translucent panel over the particle background (with --blur) */ --glass-2:rgba(255,255,255,.04); /* faint lift inside a panel */ --scrim:rgba(3,3,3,.72); /* behind sheets and dialogs */ --blur:14px; /* ---------- colour: text ---------- */ --fg:#ffffff; /* headings, primary text, icons */ --fg-2:#c4c4c4; /* body copy, secondary text */ --fg-3:#9a9a9a; /* meta lines, hints, timestamps (still AA on --ink-4) */ --fg-disabled:#5f5f5f; /* disabled labels only (WCAG 1.4.3 exempts inactive controls) */ --fg-on-red:#ffffff; /* text on --red fills (4.69:1) */ /* ---------- colour: lines ---------- */ --line:rgba(255,255,255,.09); /* decorative hairline: section rules, card edges */ --line-2:rgba(255,255,255,.16); /* stronger decorative edge: raised cards, dividers in sheets */ --line-field:rgba(255,255,255,.36); /* edge of inputs, chips, tiles, the drop zone (>= 3:1, WCAG 1.4.11) */ --line-strong:rgba(255,255,255,.64); /* hover edge of fields and tiles */ /* ---------- colour: accent and status ---------- */ --red:#E1251B; /* fills: primary button, selection badge, live dot (white on it 4.69:1) */ --red-hover:#c81e15; /* primary hover/pressed fill */ --red-2:#ff4a3d; /* red TEXT and red icons on dark surfaces (5.94:1 on --bg) */ --red-wash:rgba(225,37,27,.12); /* error banner / destructive hover background */ --red-edge:rgba(255,74,61,.55); /* edge of an error field or danger button */ --red-glow:rgba(225,37,27,.42); /* glow under the primary button on hover */ --ok:#3ecf8e; /* done, uploaded, online */ --ok-wash:rgba(62,207,142,.12); --warn:#f2c94c; /* row warnings: compressed copy, low resolution */ --warn-wash:rgba(242,201,76,.12); --focus:#ffffff; /* the one focus colour (2 px outline, 2 px offset; never removed) */ --focus-w:2px; --focus-o:2px; --selection:rgba(225,37,27,.45); /* ---------- type: families ---------- */ /* each Latin face is followed by its size-adjusted local fallback (base.css), so a late font never re-wraps a line */ --font-display:"Cabinet","Cabinet Fallback","IBM Plex Sans Arabic","Noto Kufi Arabic",ui-sans-serif,system-ui,sans-serif; --font-text:"Inter Tight","Inter Tight Fallback","IBM Plex Sans Arabic","Noto Kufi Arabic",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --font-title:var(--font-display); /* card titles and H3 (Arabic: the text face at 600, R-AR §4) */ --font-label:"Plex Mono","Plex Mono Fallback","IBM Plex Sans Arabic","Noto Kufi Arabic",ui-monospace,Menlo,Consolas,monospace; /* kickers, micro labels */ --font-mono:"Plex Mono","Plex Mono Fallback",ui-monospace,Menlo,Consolas,monospace; /* data runs only: timecodes, ids, sizes (dir=ltr) */ --font-num:"Cabinet","Cabinet Fallback",ui-sans-serif,system-ui,sans-serif; /* big price figures inside */ /* ---------- type: scale (English; Arabic below) ---------- */ --fs-hero:clamp(44px,6.4vw,92px); --lh-hero:.95; --fw-hero:800; --track-hero:-.045em; --fs-h1:clamp(38px,5vw,72px); --lh-h1:.98; --fw-h1:800; --track-h1:-.04em; --fs-h2:clamp(28px,3.4vw,48px); --lh-h2:1.04; --fw-h2:800; --track-h2:-.03em; --fs-h3:21px; --lh-h3:1.25; --fw-h3:500; --track-h3:-.01em; --fs-lede:clamp(17px,1.4vw,20px); --lh-lede:1.55; --fs-body:16px; --lh-body:1.6; --fs-ui:15px; --lh-ui:1.4; --fw-ui:600; --fs-sm:14px; --lh-sm:1.5; --fs-xs:13px; --lh-xs:1.45; --fs-ctl-xs:13px; /* the smallest text inside a control (small chips, chip and tile meta); Arabic: 14px */ --fs-label:12px; --lh-label:1.3; --track-label:.08em; --case-label:uppercase; --fs-price:clamp(30px,3vw,40px); --lh-price:1.1; --track-price:-.02em; --lh-btn:1; --clip-pad:0; /* padding-block inside overflow:hidden text boxes (Arabic needs .12em) */ --measure:66ch; /* longest comfortable line */ /* ---------- space (4 px grid) ---------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:112px; --pad:clamp(16px,4vw,32px); /* page gutter */ --section-y:clamp(56px,9vh,112px); /* vertical rhythm between page sections */ /* ---------- radius (the only radii allowed; cheap-tells checks) ---------- */ --r-xs:6px; /* keys, tiny tags, caption word marks */ --r-sm:10px; /* thumbnails, small buttons, inner wells */ --r-md:14px; /* buttons, inputs, menus, toasts, media */ --r-lg:20px; /* cards, tiles, desktop dialogs */ --r-xl:28px; /* hero panels, the drop zone, bottom-sheet top corners */ --r-pill:999px; /* chips, status tags, switches, the language switch */ /* ---------- elevation ---------- */ --edge:inset 0 0 0 1px var(--line); --edge-2:inset 0 0 0 1px var(--line-2); --edge-field:inset 0 0 0 1px var(--line-field); --edge-strong:inset 0 0 0 1px var(--line-strong); --edge-on:inset 0 0 0 1.5px var(--fg); --sheen:inset 0 1px 0 rgba(255,255,255,.06); --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 18px 40px -18px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.35); --shadow-3:0 40px 120px -20px rgba(0,0,0,.8),0 12px 32px rgba(0,0,0,.45); --glow:0 10px 30px -10px var(--red-glow); /* ---------- motion ---------- */ --ease:cubic-bezier(.16,1,.3,1); /* expo out: everything that enters or moves */ --ease-io:cubic-bezier(.65,0,.35,1); /* symmetric: toggles, progress */ --dur-1:120ms; /* press, colour */ --dur-2:200ms; /* hover, edges */ --dur-3:320ms; /* small enter/exit: toast, menu, chip check */ --dur-4:520ms; /* sheets, dialogs, tab panels */ --dur-5:900ms; /* page reveal */ --decor-stop:5s; /* decoration stops by this time (WCAG 2.2.2); only the AI log keeps moving */ /* ---------- layers ---------- */ --z-base:1; --z-header:10; --z-bar:40; --z-sheet:60; --z-toast:80; /* ---------- layout ---------- */ --w-page:1180px; /* content width */ --w-prose:760px; /* legal, help, long text */ --w-narrow:560px; /* sign-in, sheets, single forms */ --h-header:76px; --h-bar:76px; /* mobile sticky price bar (without the safe-area inset): scroll-padding-bottom uses it; priceBar() writes the real height */ --h-bar-min:76px; /* the bar's own minimum height (never read back from --h-bar, so the bar can shrink again) */ --tap:44px; /* touch target */ --tap-min:24px; /* never smaller (WCAG 2.5.8) */ --h-control:48px; /* buttons, inputs */ --h-control-sm:36px; --h-chip:40px; /* ---------- legacy names (v1 CSS: tool.css, app.css, page.css) - same values, keep until those files migrate ---------- */ --panel:var(--glass); --panel-2:var(--glass-2); --display:var(--font-display); --text:var(--font-text); --mono:var(--font-label); --r:var(--r-lg); } /* Arabic (R-AR §4 and PRODUCT_V2 6.3, binding): Arabic face first so spaces and punctuation get Arabic metrics; Plex Sans Arabic for text and UI, Noto Kufi Arabic 700 for display only, mono only inside dir=ltr data runs; nothing below 13 px (14 px when interactive); no tracking, no uppercase. */ html[lang=ar]{ --font-display:"Noto Kufi Arabic","Kufi Arabic Fallback","Cabinet","Cabinet Fallback",ui-sans-serif,system-ui,sans-serif; --font-text:"IBM Plex Sans Arabic","Plex Arabic Fallback","Noto Kufi Arabic","Inter Tight","Inter Tight Fallback",ui-sans-serif,system-ui,"Segoe UI",Tahoma,sans-serif; --font-title:var(--font-text); --font-label:var(--font-text); --font-mono:"Plex Mono","Plex Mono Fallback",ui-monospace,Menlo,Consolas,monospace; --font-num:"Cabinet","Cabinet Fallback","IBM Plex Sans Arabic","Noto Kufi Arabic",ui-sans-serif,system-ui,sans-serif; /* Arabic words in a price line ("free") get the Arabic face, never a system serif */ --fs-hero:clamp(34px,5.2vw,72px); --lh-hero:1.3; --fw-hero:700; --track-hero:0; --fs-h1:clamp(30px,4.2vw,56px); --lh-h1:1.35; --fw-h1:700; --track-h1:0; --fs-h2:clamp(26px,3vw,40px); --lh-h2:1.45; --fw-h2:700; --track-h2:0; --fs-h3:20px; --lh-h3:1.6; --fw-h3:600; --track-h3:0; --fs-lede:19px; --lh-lede:1.85; --fs-body:17px; --lh-body:1.8; --fs-ui:15px; --lh-ui:1.5; --fw-ui:600; --fs-sm:14px; --lh-sm:1.6; --fs-xs:13px; --lh-xs:1.6; --fs-ctl-xs:14px; /* interactive Arabic text: 14px floor (6.3) */ --fs-label:13px; --lh-label:1.5; --track-label:0; --case-label:none; --track-price:0; --lh-btn:1.2; --clip-pad:.12em; --measure:34em; } /* user text that turns out Latin on an Arabic page (titles, file names, comments: dir="auto") uses the Latin faces */ html[lang=ar] [dir=auto]:dir(ltr){--font-display:"Cabinet","Cabinet Fallback",ui-sans-serif,system-ui,sans-serif;--font-title:"Cabinet","Cabinet Fallback",ui-sans-serif,system-ui,sans-serif; --font-text:"Inter Tight","Inter Tight Fallback",ui-sans-serif,system-ui,sans-serif;--track-h1:-.03em;--track-h2:-.02em} @media (max-width:640px){ html[lang=ar]{--fs-lede:17px;--fs-body:16px} } @media (pointer:coarse){ :root{--h-chip:44px;--h-control-sm:44px} /* small controls are touch-size on phones (2.3: 44 px targets) */ } /* Reduced motion: every DS transition and animation reads these, so one switch calms the whole system. */ @media (prefers-reduced-motion:reduce){ :root{--dur-1:1ms;--dur-2:1ms;--dur-3:1ms;--dur-4:1ms;--dur-5:1ms;--decor-stop:0s} }