/* ═══════════════════════════════════════════════════════════════════════════ Sanad UI · design tokens — THE BRIDGE This file used to hold the application's colours. It holds none now: every value here resolves to a token from v2-tokens.css, which is the design crawled from the design app itself. THE RULE THIS FILE ALWAYS ENFORCED, and why it made the theme swap one file: no colour, size, radius or duration appears anywhere in the application except as a token from this file. 396 screens obeyed that rule, so re-pointing the names is all it took to put every one of them into the new design — including the screens that have not been redrawn yet. A screen still asking for --panel gets the new card colour; one asking for --rail gets the new sidebar. WHAT THIS FILE IS FOR NOW: it is the list of old names still in use, and it is meant to shrink. A screen that is redrawn stops asking for --panel and asks for --card. When a name here has no callers left, delete it. When the list is empty, delete the file. TWO NAMES CHANGED MEANING between the systems and were renamed in place rather than bridged, because a bridge would have been silently wrong: --accent was THE fill; in the new design it is a pale tint. The old meaning is --brand below. --muted was a TEXT colour; in the new design it is a surface. The old meaning is --ink-muted below. Everything else keeps its name and changes its value, which is exactly what a theme change is supposed to be. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── surfaces ─────────────────────────────────────────────────────────── */ --bg: var(--background); /* the work area behind everything */ --panel: var(--card); /* cards, tables, editable cells */ --panel2: var(--muted); /* secondary surfaces, footers, read-only cells */ --line: var(--border); /* primary borders */ --line2: var(--border); /* table row rules */ /* The design gives a field a card background and a DARKER border than a panel's, which is --field. The old --input named the background only, so that is what it keeps naming; the border is asked for by name where a rule wants it. */ --input: var(--card); /* ── text ─────────────────────────────────────────────────────────────── */ --text: var(--foreground); --ink-muted: var(--muted-foreground); /* THE FLOOR for any text a reader must read */ /* Decoration, dividers and secondary icons ONLY — never text that must be read. The design has no third text colour, so this is the readable one lightened toward the page rather than a fourth value invented here. */ --faint: color-mix(in oklab, var(--muted-foreground) 74%, var(--background)); /* ── the dark bars: title, rail, status ───────────────────────────────── */ --rail: var(--sidebar); --rail-text: var(--sidebar-foreground); /* ── table and row states ─────────────────────────────────────────────── */ --head: var(--muted); --hover: var(--muted); /* The selected row. --accent in the new design is exactly this — a pale tint whose whole job is marking a thing without shouting — which is the one place the two systems' meanings coincide. */ --sel: var(--accent); /* ── the brand fill ─────────────────────────────────────────────────────── Called --accent until the swap. Renamed because the new design gives that name to the tint above, and a button filled with a tint is not a button. */ --brand: var(--primary); --brand-strong: color-mix(in oklab, var(--primary) 86%, black); --brand-soft: var(--accent); --accent-fg: var(--primary-foreground); /* ── status. Four levels, one shape each — see components.css ───────────── The design carries three semantic colours and the old palette had four names for them: --warn maps to «signal», which is amber and marks a thing that wants attention rather than a thing that is wrong. */ --ok: var(--success); --ok-soft: color-mix(in oklab, var(--success) 14%, var(--card)); --warn: var(--signal); --warn-soft: color-mix(in oklab, var(--signal) 16%, var(--card)); --bad: var(--destructive); --bad-soft: color-mix(in oklab, var(--destructive) 12%, var(--card)); /* ── elevation ──────────────────────────────────────────────────────────── The old standard was «no shadows except on dialogs». The new design lifts a panel by a hair and floats a popover, and both are tokens there. */ --shadow: var(--shadow-float); /* ── type ───────────────────────────────────────────────────────────────── IBM Plex — the design's face, and the Arabic cut carries Latin glyphs too, so one family serves both scripts and a column of Arabic labels beside Latin codes keeps one set of metrics. Self-hosted (see fonts.css): a CDN face that fails to arrive falls back with different metrics and moves every column. */ --font-ui: var(--font-sans); --font-num: var(--font-mono); /* FIVE STEPS. Not six. The review found Arabic text as small as 8px, where dots and hamzas disappear — 11px is the floor for Arabic and it is a hard rule, not a preference. Sizes are the design's own: it sets 12.5px for a table and 14px for a field value, which is what these already said. */ --fs-xs: 11px; /* labels, badges, fine print — the floor */ --fs-sm: 12.5px; /* tables, lists, toolbar buttons */ --fs-base: 14px; /* field values, card and dialog titles */ --fs-lg: 16px; /* screen title */ --fs-xl: 21px; /* the one number that matters most on the screen */ /* White on the dark bars and on a filled brand button. It is not --text and it is not theme-dependent: these surfaces are dark in BOTH themes, so the text on them stays light in both. */ --on-dark: var(--sidebar-accent-foreground); /* The shortcut hint inside a toolbar button — "F9", "Esc". NINE AND A HALF PIXELS, below the 11px floor, and legitimately: that floor exists because Arabic dots and hamzas vanish at small sizes, and these glyphs are Latin capitals and digits with no diacritics at all. */ --fs-key: 9.5px; /* ── spacing · 4 6 8 10 12 14 16 ──────────────────────────────────────── */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px; /* ── radius ─────────────────────────────────────────────────────────────── The old system had six. The design has ONE — .375rem — and a full round where something is a pill. The six names stay only until their callers are redrawn; five of them now answer with the same number, which is the point. */ --r-card: var(--radius); --r-field: var(--radius); --r-dialog: var(--radius); --r-badge: var(--radius); --r-pill: 999px; --r-check: 3px; /* ── fixed heights the shell depends on ───────────────────────────────── */ --w-rail: 72px; --h-title: 38px; --h-tabs: 36px; --h-status: 26px; --h-field: 30px; --h-btn: 30px; --h-row: 30px; /* Row density, switchable per operator. 28px is the floor: below it a fingertip cannot reliably hit a row and a cell loses its padding. */ --h-row-comfortable: 36px; --h-row-medium: 32px; --h-row-compact: 28px; /* Compatibility aliases. app.css was written against these names. */ --radius-lg: var(--radius); --sunken: var(--muted); /* ── layering. Declared once so no component invents its own ──────────── */ --z-rail: 30; --z-scrim: 25; --z-dialog: 55; --z-search: 60; --z-toast: 70; /* ── the printed sheet ──────────────────────────────────────────────────── Deliberately OUTSIDE the theme, and outside this swap. A printed invoice is white paper with black ink whether the operator is working in dark mode or not, and the sheet in the print preview shows exactly what will come out of the printer. These are the only literals left in this file, and they are literals on purpose. */ --print-paper: #ffffff; --print-ink: #111111; --print-line: #444444; --print-label: #555555; --print-rule: #dddddd; /* ── motion. Short enough to feel instant on a data-entry screen ──────── */ --t-fast: 90ms; --t-base: 150ms; } /* NO DARK BLOCK HERE, and its absence is the whole gain. Every name above resolves to a v2 token, and those already answer for light, for dark, and for an operator who chose neither and runs a dark system. A second dark block here would be a second opinion about the same colour. */