/* ===================================================================== tokens.css -- the design system, as values. This is the ONLY file that decides what the interface looks like at the level of colour, weight, geometry and rhythm. Every other stylesheet spends these tokens; none of them invents a hex code, a border width or a shadow of its own. Retune the system here and the whole application follows. THE SYSTEM ---------- Neo-brutalist / retro-tech: ink borders you cannot miss, hard offset shadows with no blur, flat fills, square corners, and controls that physically move when pressed. Yellow is the action colour and carries the brand; green, blue, amber, orange and red carry meaning and nothing else. Nothing is decorative. SHADOW DIRECTION ---------------- A hard shadow has a direction, and the direction has to agree with the reading direction or the page looks lit from the wrong side. `--sh-dir` flips once, here, on the root element - which is also the element that carries `dir` - so every shadow and every press animation in the whole stylesheet mirrors for Arabic without a single RTL override elsewhere. ===================================================================== */ :root { /* ---------- Geometry ---------------------------------------------- */ --bd: 3px; /* structural: cards, panels, inputs, buttons */ --bd-thin: 2px; /* small parts: badges, chips, rank markers */ --bd-hair: 2px; /* table rules and dividers */ /* Square. Brutalism is not negotiable about this, and a stray radius anywhere reads as an accident rather than a choice. No rule spends these, because the answer is always zero and writing `0` is clearer at the call site; they are here so that a future variant of the system has somewhere to say otherwise. */ --radius-sm: 0; --radius: 0; --radius-lg: 0; --radius-pill: 0; /* ---------- Elevation --------------------------------------------- */ /* Offsets only. No blur, no spread, no opacity. */ --sh-dir: 1; /* flipped to -1 for RTL, below */ --sh-1: 3px; /* chips, small buttons */ --sh-2: 5px; /* cards, inputs, panels */ --sh-3: 8px; /* the primary action, modals, the hero */ --shadow-sm: calc(var(--sh-1) * var(--sh-dir)) var(--sh-1) 0 var(--ink); --shadow-md: calc(var(--sh-2) * var(--sh-dir)) var(--sh-2) 0 var(--ink); --shadow-lg: calc(var(--sh-3) * var(--sh-dir)) var(--sh-3) 0 var(--ink); /* How far a control travels when pressed, and what is left under it. */ --press: translate(calc(var(--sh-1) * var(--sh-dir)), var(--sh-1)); --press-deep: translate(calc(var(--sh-2) * var(--sh-dir)), var(--sh-2)); --shadow-flat: 0 0 0 var(--ink); /* ---------- Rhythm ------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --gap-tight: var(--s-3); /* rows inside one list */ --gap: var(--s-4); /* cards inside one group */ --gap-group: var(--s-6); /* groups that mean different things */ --tap: 48px; /* minimum comfortable touch target */ --header-h: 60px; --nav-h: 66px; --maxw: 780px; /* ---------- Type --------------------------------------------------- */ /* IBM Plex throughout. It is kept over a heavier display face such as Archivo Black for one decisive reason: Plex ships a genuine Arabic companion drawn to the same skeleton, and half of this application is Arabic. Weight 700 with tight tracking and uppercase carries the display work; Plex Mono carries anything a machine produced. */ --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-ar: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --t-display: clamp(27px, 7.6vw, 38px); --t-h1: 23px; --t-h2: 18px; --t-body: 16px; --t-small: 14px; --t-meta: 11.5px; /* mono, uppercase, tracked */ --track-tight: -.025em; /* display and headings */ --track-wide: .1em; /* the little mono labels */ /* ---------- Colour: light ------------------------------------------ */ color-scheme: light; --ink: #0d0d0d; /* every border and every hard shadow */ --paper: #fffdf5; /* the page itself */ --bg: var(--paper); --bg-elevated: #ffffff; --surface: #ffffff; --surface-2: #fff8e1; --border: var(--ink); --border-strong: var(--ink); --text: var(--ink); --text-muted: #3d3a33; --text-faint: #6d6758; --text-invert: #ffffff; /* Action. Yellow means "this is the thing to press" and, on a badge, "someone has taken this on". It never means a warning. */ --accent: #f5c518; --accent-hover: #ffd84a; --accent-soft: #fff3bd; --accent-text: var(--ink); --accent-contrast: var(--ink); --secondary: #0a8f54; --secondary-hover: #0aa661; --secondary-soft: #c6f3dc; --secondary-text: #044f2f; /* Meaning. One colour, one job. */ --ok: #0a8f54; /* done */ --ok-soft: #c6f3dc; --info: #1550c4; /* received / seen */ --info-soft: #d4e2ff; --warn: #a05a00; /* in progress */ --warn-soft: #ffe6b0; --urgent: #c24a05; /* on hold / urgent */ --urgent-soft: #ffdcc2; --danger: #c01919; /* stopped, refused, very urgent */ --danger-soft: #ffd5d5; /* Above danger. Reserved for life & death, which is why it is the one tone drawn as solid ink rather than coloured text on a pale ground: it has to stop the eye without a single other thing on the page competing for the same treatment. */ --critical: #ffffff; --critical-soft: #b00000; --muted-soft: #ece6d4; /* no state worth a colour */ /* Fills, as opposed to text. A 13px label on a pale ground needs a dark, low-chroma colour to stay legible. A 14px stripe or a 12px band sitting directly against a 3px ink border needs the opposite: if it is as dark as the ink it just reads as a thicker border and the signal is lost. So every tone has two values, and a rule picks whichever job it is doing. */ --ok-fill: #12b86c; --info-fill: #2f6fe4; --warn-fill: #e89000; --urgent-fill: #f2680c; --danger-fill: #e02424; --critical-fill: #b00000; --muted-fill: #8a8373; /* The