@layer legacy, tokens, base, components, utilities; /* ── v5 ──────────────────────────────────────────────────────────────────────── The cascade order for the whole redesign, declared once, here, before any rule exists. A layer's position is fixed by THIS statement, not by where its rules are written, so later rounds can add to `tokens`/`base`/`components`/ `utilities` in any order and still land above `legacy`. `legacy` is the lowest layer and holds the entire existing style.css (wrapped in `@layer legacy { … }` there, unchanged otherwise). Everything the redesign adds therefore wins on layer order alone — no priority overrides, no specificity games. Round 1 / Phase 1 adds NO tokens, base, component or utility rules. This file is the layer declaration plus the temporary v5 marker below, and nothing else. Custom properties are deliberately absent: they do not participate in layers and need the higher-specificity `:root[data-ui="v5"]` selectors from Addendum A, which is Phase 2. Loaded after style.css and gated by , which only appears when the `ui` cookie (or ?ui=v5) is set. Without it this file changes nothing. ──────────────────────────────────────────────────────────────────────────── */ /* ── The v5 marker ────────────────────────────────────────────────────────── Deliberately in `legacy`, not in `components`: the layer contract is that `tokens`/`base`/`components`/`utilities` are scoped under `:root[data-ui="v5"]` and are written from Phase 2 onward on top of a token set that does not exist yet. A marker rule sitting in `components` with hardcoded values would be the first violation of the do-not list. In `legacy` it is a peer of the old stylesheet — same layer, later source order — so it costs the redesign nothing and disappears with the rest of the switch in the final round. Selector-scoped to html[data-ui="v5"], so it is inert without the cookie. z-index sits above every page-level control (#toast 100, back-to-top 50) and below the modal backdrop (200) and the menu panel (300), so it can never cover a dialog. pointer-events:none keeps it from swallowing a tap on the element underneath. Logical insets, not left/right: this app is RTL, so inset-inline-start is the RIGHT edge here — the corner opposite #warehouse-back-to-top, which is pinned physically left. Colours come from the existing tokens, so the marker follows the light/dark theme for free and adds no hex literal. Deleted in the final round. It exists so the switch cannot be forgotten. */ @layer legacy { html[data-ui="v5"] .v5-badge { position: fixed; inset-block-end: max(8px, env(safe-area-inset-bottom)); inset-inline-start: max(8px, env(safe-area-inset-left)); z-index: 150; pointer-events: none; opacity: .35; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-family: 'Vazirmatn', Tahoma, Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; } } /* ── Round 1 / Phase 2 — the token layer ─────────────────────────────────────── Three things live here and nothing else: the v5 theme palettes, the theme-independent scales, and the alias block that re-points every one of the 32 legacy custom properties at a v5 token. No base, component or utility rule — those are Phase 3 and Round 2. SELECTORS (Addendum A1). Custom properties do NOT participate in @layer; they cascade by specificity and source order alone. Wrapping them in `tokens` changes nothing about who wins, so every selector below carries `:root` to reach 0,2,0 and out-specify — or at minimum tie-and-outrank-by-source-order — the legacy blocks in style.css: :root style.css:18 0,1,0 :root[data-theme="dark"] style.css:72 0,2,0 :root:not([data-theme]) style.css:108 0,2,0 (in prefers-color-scheme) A bare [data-ui="v5"] is only 0,1,0 and would have lost to the dark block — light would have worked, dark would silently not have. Hence: scales + aliases :root[data-ui="v5"] 0,2,0 light :root[data-ui="v5"][data-theme="light"] 0,3,0 dark :root[data-ui="v5"][data-theme="dark"] 0,3,0 OS dark, no cookie :root[data-ui="v5"]:not([data-theme]) 0,3,0 The 0,2,0 default block ties style.css's dark and OS-dark blocks on specificity and wins on source order, because v5.css is linked after style.css. That tie is intentional and is what makes the un-themed default land on v5 light rather than legacy dark. THEME STRUCTURE (Addendum A2). v5 is not dark-first. It mirrors the existing structure exactly — default light, explicit light duplicated at higher specificity for clarity, explicit dark, and OS dark only when no theme cookie has been set — so the cookie still wins and the OS still decides in its absence. Behaviour is unchanged; only the palette differs. Everything is gated on data-ui="v5", so without the `ui` cookie not one declaration here applies and the app resolves exactly the legacy values. ──────────────────────────────────────────────────────────────────────────── */ @layer tokens { /* ── Theme: light (default) ───────────────────────────────────────────────── No data-theme attribute → light, matching the app's current default. The --v5-surface-solid / -positive-hover / -negative-hover trio comes from Addendum A3: the legacy :root has opaque card backgrounds and hover states with no v5 equivalent, and --surface/--raised must alias to something OPAQUE or nested cards would stack transparency and go muddy. */ :root[data-ui="v5"] { --v5-bg:#F2EDE3; --v5-bloom-a:rgba(14,107,94,.16); --v5-bloom-b:rgba(168,121,31,.17); --v5-bloom-c:rgba(14,107,94,.08); --v5-surface:rgba(255,255,255,.72); --v5-surface-2:rgba(255,255,255,.92); --v5-surface-solid:#FFFFFF; --v5-line:rgba(80,66,40,.11); --v5-line-2:rgba(80,66,40,.2); --v5-sunken:rgba(80,66,40,.07); --v5-text:#1B1A17; --v5-text-muted:#756E62; --v5-text-faint:#A29988; --v5-accent:#0E6B5E; --v5-accent-2:#0A5449; --v5-accent-hi:#17998A; --v5-accent-tint:rgba(14,107,94,.11); --v5-accent-line:rgba(14,107,94,.26); --v5-on-accent:#FFFFFF; --v5-grad-accent:linear-gradient(158deg,#15866F 0%,#0E6B5E 55%,#0A4E45 100%); --v5-glow:0 6px 18px rgba(14,107,94,.22); --v5-edge-glow:0 0 0 rgba(0,0,0,0); --v5-gold:#A8791F; --v5-gold-2:#D4A63C; --v5-gold-tint:rgba(168,121,31,.13); --v5-gold-line:rgba(168,121,31,.28); --v5-positive:#2C7A4B; --v5-positive-tint:rgba(44,122,75,.12); --v5-positive-line:rgba(44,122,75,.26); --v5-positive-hover:#245F3B; --v5-negative:#BE3A31; --v5-negative-tint:rgba(190,58,49,.11); --v5-negative-line:rgba(190,58,49,.25); --v5-negative-hover:#9E2E27; --v5-ov-bg:rgba(255,255,255,.82); --v5-ov-line:rgba(255,255,255,.95); --v5-ov-gloss:inset 0 1px 0 rgba(255,255,255,1); --v5-ov-blur:blur(26px) saturate(150%); --v5-scrim:rgba(40,30,16,.42); --v5-sh:0 6px 22px rgba(60,48,26,.10); --v5-sh-float:0 14px 40px rgba(60,48,26,.18); } /* ── Theme: light (explicit) ──────────────────────────────────────────────── Byte-identical to the block above, restated at 0,3,0. Deliberate duplication per Addendum A2: an explicit light cookie must out-specify the explicit dark block, and inheriting the default by omission would leave that dependent on source order alone. */ :root[data-ui="v5"][data-theme="light"] { --v5-bg:#F2EDE3; --v5-bloom-a:rgba(14,107,94,.16); --v5-bloom-b:rgba(168,121,31,.17); --v5-bloom-c:rgba(14,107,94,.08); --v5-surface:rgba(255,255,255,.72); --v5-surface-2:rgba(255,255,255,.92); --v5-surface-solid:#FFFFFF; --v5-line:rgba(80,66,40,.11); --v5-line-2:rgba(80,66,40,.2); --v5-sunken:rgba(80,66,40,.07); --v5-text:#1B1A17; --v5-text-muted:#756E62; --v5-text-faint:#A29988; --v5-accent:#0E6B5E; --v5-accent-2:#0A5449; --v5-accent-hi:#17998A; --v5-accent-tint:rgba(14,107,94,.11); --v5-accent-line:rgba(14,107,94,.26); --v5-on-accent:#FFFFFF; --v5-grad-accent:linear-gradient(158deg,#15866F 0%,#0E6B5E 55%,#0A4E45 100%); --v5-glow:0 6px 18px rgba(14,107,94,.22); --v5-edge-glow:0 0 0 rgba(0,0,0,0); --v5-gold:#A8791F; --v5-gold-2:#D4A63C; --v5-gold-tint:rgba(168,121,31,.13); --v5-gold-line:rgba(168,121,31,.28); --v5-positive:#2C7A4B; --v5-positive-tint:rgba(44,122,75,.12); --v5-positive-line:rgba(44,122,75,.26); --v5-positive-hover:#245F3B; --v5-negative:#BE3A31; --v5-negative-tint:rgba(190,58,49,.11); --v5-negative-line:rgba(190,58,49,.25); --v5-negative-hover:#9E2E27; --v5-ov-bg:rgba(255,255,255,.82); --v5-ov-line:rgba(255,255,255,.95); --v5-ov-gloss:inset 0 1px 0 rgba(255,255,255,1); --v5-ov-blur:blur(26px) saturate(150%); --v5-scrim:rgba(40,30,16,.42); --v5-sh:0 6px 22px rgba(60,48,26,.10); --v5-sh-float:0 14px 40px rgba(60,48,26,.18); } /* ── Theme: dark (explicit) ───────────────────────────────────────────────── 0,3,0, so it beats both the default block above and style.css's dark block. Warm near-black rather than the legacy blue-grey; surfaces stay layered (bg < surface-solid) so a card still reads as raised. */ :root[data-ui="v5"][data-theme="dark"] { --v5-bg:#14120D; --v5-bloom-a:rgba(25,148,127,.20); --v5-bloom-b:rgba(201,162,74,.13); --v5-bloom-c:rgba(25,148,127,.09); --v5-surface:rgba(255,255,255,.048); --v5-surface-2:rgba(255,255,255,.078); --v5-surface-solid:#1E1C17; --v5-line:rgba(255,255,255,.085); --v5-line-2:rgba(255,255,255,.15); --v5-sunken:rgba(0,0,0,.3); --v5-text:#F0EBE0; --v5-text-muted:#9B9384; --v5-text-faint:#6C6558; --v5-accent:#1D9E88; --v5-accent-2:#0E6B5E; --v5-accent-hi:#2FBBA1; --v5-accent-tint:rgba(29,158,136,.15); --v5-accent-line:rgba(29,158,136,.34); --v5-on-accent:#04201B; --v5-grad-accent:linear-gradient(158deg,#1D9E88 0%,#12786A 55%,#0B5147 100%); --v5-glow:0 0 22px rgba(29,158,136,.34); --v5-edge-glow:0 0 9px currentColor; --v5-gold:#C9A24A; --v5-gold-2:#E0BE6C; --v5-gold-tint:rgba(201,162,74,.15); --v5-gold-line:rgba(201,162,74,.32); --v5-positive:#3EA869; --v5-positive-tint:rgba(62,168,105,.15); --v5-positive-line:rgba(62,168,105,.3); --v5-positive-hover:#4FBC7B; --v5-negative:#DF6357; --v5-negative-tint:rgba(223,99,87,.15); --v5-negative-line:rgba(223,99,87,.3); --v5-negative-hover:#EA7568; --v5-ov-bg:rgba(31,28,22,.72); --v5-ov-line:rgba(255,255,255,.16); --v5-ov-gloss:inset 0 1px 0 rgba(255,255,255,.15); --v5-ov-blur:blur(26px) saturate(150%); --v5-scrim:rgba(6,5,3,.62); --v5-sh:0 6px 24px rgba(0,0,0,.45); --v5-sh-float:0 14px 44px rgba(0,0,0,.6); } /* ── Theme: dark (OS preference, no cookie) ───────────────────────────────── Same values as the explicit dark block, scoped to :not([data-theme]) so an explicit light choice always wins over a dark OS — the same contract, and the same deliberate duplication, as style.css:108. A no-JS first paint cannot read a shared constant, so the two copies are kept in sync by hand. */ @media (prefers-color-scheme: dark) { :root[data-ui="v5"]:not([data-theme]) { --v5-bg:#14120D; --v5-bloom-a:rgba(25,148,127,.20); --v5-bloom-b:rgba(201,162,74,.13); --v5-bloom-c:rgba(25,148,127,.09); --v5-surface:rgba(255,255,255,.048); --v5-surface-2:rgba(255,255,255,.078); --v5-surface-solid:#1E1C17; --v5-line:rgba(255,255,255,.085); --v5-line-2:rgba(255,255,255,.15); --v5-sunken:rgba(0,0,0,.3); --v5-text:#F0EBE0; --v5-text-muted:#9B9384; --v5-text-faint:#6C6558; --v5-accent:#1D9E88; --v5-accent-2:#0E6B5E; --v5-accent-hi:#2FBBA1; --v5-accent-tint:rgba(29,158,136,.15); --v5-accent-line:rgba(29,158,136,.34); --v5-on-accent:#04201B; --v5-grad-accent:linear-gradient(158deg,#1D9E88 0%,#12786A 55%,#0B5147 100%); --v5-glow:0 0 22px rgba(29,158,136,.34); --v5-edge-glow:0 0 9px currentColor; --v5-gold:#C9A24A; --v5-gold-2:#E0BE6C; --v5-gold-tint:rgba(201,162,74,.15); --v5-gold-line:rgba(201,162,74,.32); --v5-positive:#3EA869; --v5-positive-tint:rgba(62,168,105,.15); --v5-positive-line:rgba(62,168,105,.3); --v5-positive-hover:#4FBC7B; --v5-negative:#DF6357; --v5-negative-tint:rgba(223,99,87,.15); --v5-negative-line:rgba(223,99,87,.3); --v5-negative-hover:#EA7568; --v5-ov-bg:rgba(31,28,22,.72); --v5-ov-line:rgba(255,255,255,.16); --v5-ov-gloss:inset 0 1px 0 rgba(255,255,255,.15); --v5-ov-blur:blur(26px) saturate(150%); --v5-scrim:rgba(6,5,3,.62); --v5-sh:0 6px 24px rgba(0,0,0,.45); --v5-sh-float:0 14px 44px rgba(0,0,0,.6); } } /* ── Scales (theme-independent) ───────────────────────────────────────────── Eight type sizes replacing the current ~30, six spacing steps replacing ~90, five radii replacing 13. These are the ONLY permitted values: no later round introduces a ninth font size or a seventh spacing step. Deliberately outside the theme blocks — nothing here changes between light and dark. */ :root[data-ui="v5"] { --v5-t-xs:.6875rem; /* 11 */ --v5-t-sm:.75rem; /* 12 */ --v5-t-md:.8125rem; /* 13 */ --v5-t-base:.875rem; /* 14 */ --v5-t-lg:1rem; /* 16 */ --v5-t-xl:1.25rem; /* 20 */ --v5-t-2xl:1.625rem; /* 26 */ --v5-t-3xl:2.25rem; /* 36 */ --v5-sp-1:4px; --v5-sp-2:8px; --v5-sp-3:12px; --v5-sp-4:16px; --v5-sp-5:20px; --v5-sp-6:24px; --v5-r-sm:10px; --v5-r-md:14px; --v5-r-lg:20px; --v5-r-xl:26px; --v5-r-pill:999px; --v5-row-compact:10px 16px; --v5-row-comfy:14px 16px; --v5-dur:160ms; --v5-ease:cubic-bezier(.2,.7,.3,1); } /* ── Aliases (Addendum A4) ────────────────────────────────────────────────── Every one of the 32 properties in style.css's :root, re-pointed at the nearest v5 token. Nothing in style.css is edited and nothing is renamed or deleted, so every existing rule keeps resolving — including the one runtime expression that builds a property name as a string at src/app.js:2869, which consumes --green and --red and needs no change. Notes on the three non-obvious entries: • --surface / --raised → --v5-surface-solid, not --v5-surface. They are used across the legacy stylesheet as opaque card backgrounds; the translucent token would let nested surfaces stack and go muddy. • --radius moves 10px → 14px under v5 only. Intended. • --logo-plate stays `none` — it is not a colour, and the logo PNG cannot be recoloured per theme. */ :root[data-ui="v5"] { /* green family → positive */ --green: var(--v5-positive); --green-hover: var(--v5-positive-hover); --green-dot: var(--v5-positive); --green-tint: var(--v5-positive-tint); /* red family → negative */ --red: var(--v5-negative); --red-hover: var(--v5-negative-hover); --red-dot: var(--v5-negative); --red-tint: var(--v5-negative-tint); --red-tint-border: var(--v5-negative-line); --red-tint-soft: var(--v5-negative-tint); /* warning / amber → gold */ --warn: var(--v5-gold); --warn-text: var(--v5-gold); /* chart profit bars → gold */ --chart-profit-1: var(--v5-gold); --chart-profit-2: var(--v5-gold-2); /* neutrals / surfaces */ --bg: var(--v5-bg); --surface: var(--v5-surface-solid); --raised: var(--v5-surface-solid); --hover: var(--v5-surface-2); --warm-panel: var(--v5-surface-2); --border: var(--v5-line); --text: var(--v5-text); --text-muted: var(--v5-text-muted); --on-accent: var(--v5-on-accent); /* backdrop + elevation */ --backdrop: var(--v5-scrim); --shadow: var(--v5-sh); --shadow-md: var(--v5-sh); --shadow-toast: var(--v5-sh); --shadow-menu: var(--v5-sh-float); --shadow-modal: var(--v5-sh-float); /* brand mark — unchanged */ --logo-plate: none; /* geometry / type */ --radius: var(--v5-r-md); --font: 'Vazirmatn', Tahoma, Arial, sans-serif; } } /* ── Base (Phase 3) ───────────────────────────────────────────────────────── Bare-element defaults only: no classes, no IDs, no !important, no new custom properties. Every selector is gated on :root[data-ui="v5"], so without the `ui` cookie not one declaration applies. Logical properties throughout (no physical left/right), which is what keeps the RTL document correct without a mirrored stylesheet. Heading tracking is pinned to 0 rather than negative: Persian is a joining script and letter-spacing breaks the connections. ──────────────────────────────────────────────────────────────────────────── */ @layer base { /* universal box-sizing */ :root[data-ui="v5"], :root[data-ui="v5"] *, :root[data-ui="v5"] *::before, :root[data-ui="v5"] *::after { box-sizing:border-box; } /* document body */ :root[data-ui="v5"] body { font-family:var(--font); font-size:var(--v5-t-base); line-height:1.6; color:var(--v5-text); background:var(--v5-bg); -webkit-font-smoothing:antialiased; } /* ambient bloom — fixed, behind everything, never intercepts input */ :root[data-ui="v5"] body::before { content:""; position:fixed; inset-block:0; inset-inline:0; z-index:-1; pointer-events:none; background: radial-gradient(60rem 40rem at 78% -8%, var(--v5-bloom-a), transparent 62%), radial-gradient(46rem 34rem at 8% 4%, var(--v5-bloom-b), transparent 60%), radial-gradient(70rem 48rem at 50% 108%, var(--v5-bloom-c), transparent 66%); } /* Round 16 — touch feedback. Mobile WebKit paints a translucent blue rectangle over whatever was tapped for ~200ms, on every ,