/* ========================================================================== v3 design tokens Source: Figma "Tahadani-Dev" — file w4BsFLTtBoluvljxUlu5Vi Extracted from the bound variables on the landing (8440:16183), وصلها game board (8440:14185) and تسجيل الدخول (7689:1341) nodes. NOT YET LINKED from views/layouts/head.ejs — wiring happens with the v3 flag. When it is linked it must come AFTER custom.css so it wins the cascade without !important. ========================================================================== */ :root { /* ---------- Palette: green ---------- */ --v3-green-900: #04372a; /* Text/Green/Primary */ --v3-green-800: #064e3b; /* Bg/Green/default, Text/Green/Secondary, Border/Green */ --v3-green-500: #58887c; /* Text/Green/Tertiary, Bg/Green/Invert/pressed */ --v3-green-300: #8caea5; /* Border/Green-Disable */ --v3-green-050: #f4fce2; /* Bg/Primary/Basic — "greenoffwhite", the page ground */ --v3-green-100: #e6edeb; /* Bg/Green/Primary — the "قبل" pill */ --v3-green-200: #b2c8c2; /* Bg/Green/Secondary — an inactive hint icon tile */ --v3-green-075: #effad4; /* raw fill on the FAQ card (8440:16268) — not a Figma variable */ /* ---------- Palette: orange ---------- */ --v3-orange-700: #ac572b; /* Text/Orange/Primary */ --v3-orange-600: #dc6f38; /* Text/Brand, Border/Orange-alt */ --v3-orange-500: #f27a3d; /* Bg/Orange/Solid, Border/Orange, Icons/Orange/Primary */ --v3-orange-050: #fef2ec; /* Bg/Orange/Primary (+ -alt), Text/Orange/Primary-Subtle */ --v3-orange-100: #fbd6c3; /* Bg/Orange/Secondary — the بلوك popup's note strip, and the countdown ring's track */ --v3-orange-200: #f9c2a6; /* Border/orangesubtle — the "بعد" pill */ --v3-orange-300: #f59564; /* Text/Orange/Tertiary — the "الأكثر شراءً" badge (8440:16519) */ /* ---------- Pricing card palette ---------- The plan cards (8440:16406) are the only place these appear. Only the first is a Figma variable; the other two are raw fills on the card. */ --v3-green-850: #032b20; /* Colors/Secondary/800 — dark end of the card gradient */ --v3-lime-200: #dcf3a3; /* the price figure */ --v3-gold-400: #fac559; /* "أفضل قيمة" / "الأكثر طلبًا" badge text */ /* Interaction states, from the Button component set (6376:3387) */ --v3-orange-hover: #dc6f38; /* Bg/Orange/Solid-hover, Text/Orange/Secondary-hover — the SAME hex as orange-600; hover DARKENS */ --v3-orange-disabled-bg: #ffe3d1; /* Button/Brand 1/Disabled */ --v3-orange-disabled-fg: #f6a67d; /* Text/Orange/Disabled, Icons/Orange/Disabled */ /* ---------- Green used by icons only ---------- Icons/Green/Primary is a THIRD green, distinct from green-800 (#064e3b) and green-900 (#04372a). Appears on the tick badge (6432:21310) and the team-picker "+" glyph (7940:9592). */ --v3-green-icon: #054736; /* ---------- Green used by the board dock ---------- Colors/Secondary/300 — the ring around فريق 2's score pill (7977:12124). A fourth green, lighter than green-800 and unrelated to green-icon. */ --v3-green-300: #58887c; /* ---------- Legacy orange ---------- #fe7527 is the v2 brand orange. It should NOT exist in v3, but it is still bound in two design-system components: the team-picker's selected slot border and both tick-badge glow shadows (as rgba(254,117,39,…)). Kept here ONLY so those two components can be reproduced faithfully. Do not use it for anything new — see docs/v3-design-queries.md. */ --v3-orange-legacy: #fe7527; /* ---------- Palette: neutral ---------- */ --v3-white: #fefefe; /* Bg/Primary/White, Text/White, Border/White, Icons/White */ --v3-neutral-950:#0a0a0a; --v3-neutral-900:#0a0d12; /* Text/Primary */ --v3-neutral-600:#50545b; /* Text/Secondary — hint descriptions */ --v3-neutral-500:#676b74; /* Text/Tertiary — the previous-game card's date */ --v3-neutral-400:#a0a3aa; /* Border/Primary */ /* ---------- Palette: error ---------- */ --v3-error-700: #aa3028; /* Border/Error-dark, Icons/Error/Primary(-on brand) */ --v3-error-500: #f04438; /* Border/Error — the input error border */ --v3-error-600: #da3e33; /* Text/Error-Onbrand subtle */ --v3-error-050: #feeceb; /* Bg/Error/Primary */ /* ---------- Palette: success ---------- */ --v3-success-500: #17b26a; /* Border/Success, Bg/Success/default — the 200 row */ --v3-success-700: #107e4b; /* Border/Success-dark — that row's bottom edge */ /* ---------- Palette: win / lose ---------- Only the finish (8658:7937) uses these, and they are NOT the success and error colours: a flat red and teal chosen to read as a scoreboard rather than as a validation state. Unbound in Figma — taken from the frame. */ --v3-win-500: #1ab5b0; /* the winner's card */ --v3-win-700: #148884; /* its score pill's ring and figures */ --v3-lose-500: #e74c3c; --v3-lose-700: #c0392b; /* ---------- Palette: warning ---------- Only the game board uses these: they are the 400 row on a category card. */ --v3-warning-500: #f79009; /* Bg/Warning/default */ --v3-warning-050: #fdddb3; /* Bg/Warning/secondary — the far end of the points-doubling strip on the دبلها popup */ --v3-warning-700: #af6606; /* Border/Warning-dark */ /* ---------- Disabled (form controls) — Input Field set 6193:18165 ---------- Note these are NEUTRAL greys, unrelated to the button's peach disabled. */ --v3-disabled-bg: #f1f1f2; /* Bg/Disabled */ --v3-disabled-fg: #8d9199; /* Text/Disabled */ --v3-disabled-border: #a0a3aa; /* Border/Disabled */ --v3-disabled-icon: #a0a3aa; /* Icons/Disabled */ /* ---------- Alpha borders ---------- */ --v3-border-white-subtle: #ffffff59; /* Border/White-Subtle — white @ 35% */ --v3-border-dark-subtle: #00000014; /* Border/Primary-alt — black @ 8% */ --v3-bg-page-veil: #f4fce2d1; /* the page ground @ 82%, for a scrim */ --v3-orange-wash: #fe752724; /* legacy orange @ 14% — the disc under a card's heart and info buttons */ --v3-green-tertiary-subtle: #295e5080; /* Text/Green/Tertiary-Subtle @ 50% */ /* ========================================================== Semantic aliases — prefer these in component CSS ========================================================== */ /* Surfaces */ --v3-bg-page: var(--v3-green-050); --v3-bg-surface: var(--v3-white); --v3-bg-brand: var(--v3-orange-500); --v3-bg-brand-tint: var(--v3-orange-050); --v3-bg-green: var(--v3-green-800); --v3-bg-green-press: var(--v3-green-500); --v3-bg-error: var(--v3-error-050); --v3-bg-faq: var(--v3-green-075); /* Text */ --v3-text-primary: var(--v3-green-900); --v3-text-secondary: var(--v3-green-800); --v3-text-tertiary: var(--v3-green-500); --v3-text-on-brand: var(--v3-orange-700); --v3-text-brand: var(--v3-orange-600); --v3-text-accent: var(--v3-orange-500); --v3-text-inverse: var(--v3-white); --v3-text-neutral: var(--v3-neutral-900); /* Borders */ --v3-border-green: var(--v3-green-800); --v3-border-green-off:var(--v3-green-300); --v3-border-orange: var(--v3-orange-500); --v3-border-orange-alt:var(--v3-orange-600); --v3-border-neutral: var(--v3-neutral-400); --v3-border-white: var(--v3-white); --v3-border-error: var(--v3-error-700); /* Icons */ --v3-icon-white: var(--v3-white); --v3-icon-orange: var(--v3-orange-500); --v3-icon-error: var(--v3-error-700); /* ========================================================== Typography — Graphik Arabic (already self-hosted, see loadfont.css) All four weights the design uses are present as woff2. ========================================================== */ --v3-font: 'Graphik Arabic', sans-serif; --v3-fw-regular: 400; --v3-fw-medium: 500; --v3-fw-semibold: 600; --v3-fw-bold: 700; /* Web scale */ --v3-fs-hero: 64px; /* Web/Hero: Bold — only the finish uses it */ --v3-fs-h1: 48px; --v3-fs-h2: 40px; --v3-fs-h3: 32px; --v3-fs-h4: 24px; --v3-fs-h5: 20px; --v3-fs-title: 18px; --v3-fs-body: 16px; --v3-fs-caption: 14px; /* Mobile scale */ --v3-fs-m-h2: 24px; --v3-fs-m-h3: 20px; /* Mobile/H3: Bold — the game-mode cards' titles */ --v3-fs-m-title: 18px; --v3-fs-m-body: 16px; --v3-fs-m-caption: 14px; --v3-fs-m-small: 12px; /* Line heights. `lineHeight: 100` in the Figma variable dump is Figma's "Auto", not 100px/100% — get_design_context emits `line-height: normal` for those nodes. But do NOT take that literally in CSS: Chrome's `normal` is ~1.625 for Graphik Arabic while Figma's Auto is ~1.175, so `normal` inflates every Auto block by ~38%. Use --v3-lh-auto instead. The two styles carrying explicit values are Web/H3 Medium (1.5) and Web/H4 Medium (38px on 24px = 1.583), mapped below. */ /* Figma's "Auto" (reported as lineHeight:100) resolves to ~1.175 for Graphik Arabic. Chrome's `line-height: normal` gives ~1.625 for the same font, so using `normal` makes every Auto-spaced block ~38% taller than the design and pushes everything below it down. Use this token wherever Figma says Auto and the box height matters. Verified two ways: a 40px title measures 47px in Figma (1.175), and the FAQ card's 214px height only adds up at 1.175. */ --v3-lh-auto: 1.175; --v3-lh-tight: 1.25; /* headings */ --v3-lh-normal: 1.5; /* body copy */ --v3-lh-relaxed: 1.583; /* H4 Medium, measured */ /* ========================================================== Spacing — base unit 8 (the only spacing variable bound in Figma) ========================================================== */ --v3-space-1: 4px; --v3-space-2: 8px; --v3-space-3: 12px; --v3-space-4: 16px; --v3-space-5: 24px; --v3-space-6: 32px; --v3-space-7: 40px; --v3-space-8: 48px; --v3-space-9: 64px; --v3-space-10: 80px; /* ========================================================== Radii — PROVISIONAL, measured off screenshots not variables. Pin from component nodes in phase 1. ========================================================== */ --v3-radius-sm: 8px; --v3-radius-md: 16px; --v3-radius-lg: 24px; /* question / content cards */ --v3-radius-pill: 999px; /* buttons, category + timer pills, badges — CONFIRMED (8440:16271) */ --v3-radius-faq: 60px; /* FAQ card — CONFIRMED (8440:16268) */ /* ========================================================== Elevation. The brand button is not flat: it carries a drop shadow AND an inner bottom bevel, which together give it its 3D look. Both CONFIRMED from Button 8440:16271. ========================================================== */ --v3-shadow-btn: 0 2px 1.5px rgba(0, 0, 0, .25); --v3-bevel-inset: inset 0 -2px 4px 0 rgba(0, 0, 0, .25); /* ========================================================== Button sizing — Semantic Space/Button/* in the component set (6376:3387). Large is the only size with a bound width token (336px); the rest come from the symbol geometry: Mid 270, Small 150, Xsm 102. ========================================================== */ --v3-btn-h-lg: 56px; --v3-btn-h-md: 48px; --v3-btn-h-sm: 44px; --v3-btn-h-xs: 36px; /* Layout */ --v3-container: 1240px; /* content width inside the 1440 frame (100px gutters) */ } /* ========================================================================== Known gaps — resolve before the phases that need them -------------------------------------------------------------------------- 1. وصلها team colors. The teal and red territory fills on the honeycomb board are RAW FILLS in Figma, not bound variables, so they are absent here. Read them off the board node when phase 7 starts. 2. `orange1` is bound to an empty value in the Figma variable set — looks like a broken variable. Worth fixing on the design side. 3. Mobile screens live on the Figma "Mobile" page, which the MCP bridge does not currently enumerate. The Mobile/* type scale above came from variables referenced by the Web page. Re-verify against real mobile frames before building the /app/* webview surface. ========================================================================== */