/* css/variables.css - Design System Variables for marwandahi */ /* [data-theme="light"] is here so the palette can be asked for by name on something other than the root — the theme wipe paints a disc in the theme that is arriving, which means holding both palettes at once. */ :root, [data-theme="light"] { /* Typography */ --font-display: 'IBM Plex Sans Arabic', 'Cairo', sans-serif; --font-body: 'Cairo', sans-serif; --font-comic: 'Permanent Marker', 'Cairo', sans-serif; /* Numbers, in both documents. The lesson reader declared this for itself; the shell prints the same counts on its cards and needs the same face. */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* The rail, in the three numbers it is actually built from, and its height derived from them rather than written down a second time. The hero is pulled up under the header by exactly --header-h so the sea starts at the top of the page. When the height was its own literal, the phone's stylesheet changed the padding under the bar from 6px to 8px and the two drifted: the pull-up stayed 82px, the rail became 84px, and a 2px seam of paper showed above the water. Now the padding is the only thing any stylesheet sets and the height follows it — and the notch inset is in the sum, so a phone that reserves 47px for a notch is carried too. */ --header-pad-top: 12px; --header-pad-bottom: 6px; --header-bar-h: 64px; --header-h: calc(env(safe-area-inset-top, 0px) + var(--header-pad-top) + var(--header-pad-bottom) + var(--header-bar-h)); /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3.5rem; --spacing-giant: 5.5rem; /* Border Radii */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Motion ---------------------------------------------------------------------- Ink on paper: things are stamped, not faded. --ease-stamp overshoots a hair on arrival, the way a stamp rebounds off the page; --ease-out is the confident deceleration everything else lands on. Duration expresses consequence — a tap is acknowledged instantly, a view change is explained, and only the theme switch is allowed to be an event. */ --ease-stamp: cubic-bezier(0.2, 1.22, 0.4, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4); /* The header's own move. Long and eased almost flat at both ends — the bar does not snap into being a slab, it is drawn in. Everything about the header transitions on exactly these two so the width, the corner, the ground and the rule all land on the same frame. */ --dur-morph: 700ms; --ease-morph: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-tap: 90ms; --dur-state: 180ms; --dur-move: 340ms; --dur-view: 460ms; --dur-focal: 720ms; --transition-fast: var(--dur-tap) cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: var(--dur-state) cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: var(--dur-move) var(--ease-out); /* Manga Neo-Brutalism Shadows (Thick, flat offset shadows). --shadow-color is its own token, not the ink colour: in dark mode the ink inverts to near-white, and a white "shadow" is backwards — a hard shadow only reads as depth when it is darker than the surface it falls on. */ --shadow-color: #0b1620; --shadow-sm: 3px 3px 0px var(--shadow-color); --shadow-md: 6px 6px 0px var(--shadow-color); --shadow-lg: 10px 10px 0px var(--shadow-color); --shadow-pop: -6px 6px 0px var(--shadow-color); /* What the browser paints before it has read a line of this file, and what it paints anywhere the page does not: the canvas behind a document whose stylesheet has not landed yet, form controls, scrollbars, and — the case this was missing for — the inside of an