/* GENERATED by site/tools/build-theme-assets.py from PHASE-4/design-system/tokens.css — do not edit here. */ /* ===================================================================== GOGO INDUSTRY · Design tokens · Phase 4 Step 2 · direction « Précis » Version 1.0 (01/10/2026) — APPROVED (Step 2). Only open item: Arabic 600 self-hosted font file (Phase 5/6). Same values in tokens.json. Layers: 1 PRIMITIVE (raw values) → 2 SEMANTIC (meaning) → 3 COMPONENT Rules: - Approved brand colours = Phase 2 §0 #4 / §E only (12 values). - INTERACTION tokens (hover shades, field border, overlay) are APPROVED design tokens (01/10/2026) but are NOT brand colours. They live in their own block and are only referenced through semantic tokens. - Use CSS logical properties (inline/block, start/end) so the same CSS works for FR/EN (LTR) and AR (RTL). - Breakpoints cannot be CSS variables inside @media/@container; they are documented here and used as literal values. ===================================================================== */ :root { /* ------------------------------------------------------------------- 1. PRIMITIVE · APPROVED COLOURS (Phase 2 §0 #4, §E) — 12 values ------------------------------------------------------------------- */ --gi-c-white: #FFFFFF; /* Blanc */ --gi-c-black: #111111; /* Noir */ --gi-c-red: #C8102E; /* Rouge GOGO */ --gi-c-orange: #F57C00; /* Orange — black text only */ --gi-c-blue-light: #EEF4FA; /* Bleu clair */ --gi-c-grey-light: #F4F5F7; /* Gris clair */ --gi-c-grey-text: #4B5563; /* Gris texte */ --gi-c-border: #E2E6EA; /* Bordures — decorative only (1.3:1) */ --gi-c-steel: #1D4E89; /* Bleu acier — graphics only */ --gi-c-success: #1E7E34; /* Succès */ --gi-c-warning: #8A5A00; /* Avertissement */ --gi-c-error: #A50E1E; /* Erreur — always icon + text */ /* ------------------------------------------------------------------- 1b. PRIMITIVE · INTERACTION TOKENS — APPROVED 01/10/2026 (design tokens for states; NOT part of the 12 brand colours) ------------------------------------------------------------------- */ --gi-ix-orange-hover: #FF8A1A; /* black text 8.0:1 */ --gi-ix-black-hover: #2B2B2B; /* white text 14.2:1 */ --gi-ix-red-hover: #A50D26; /* white text 7.8:1 */ --gi-ix-field-border: #8A93A0; /* 3.1:1 vs white (UI ≥ 3:1) */ --gi-ix-overlay: rgba(17, 17, 17, 0.5); /* black #111111 at 50 % — dialog/drawer backdrop */ /* ------------------------------------------------------------------- 1c. PRIMITIVE · TYPE ------------------------------------------------------------------- */ --gi-font-latin: "IBM Plex Sans", Arial, sans-serif; --gi-font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, sans-serif; --gi-fw-regular: 400; --gi-fw-medium: 500; --gi-fw-semibold: 600; /* Arabic 600: preview loads it from Google Fonts; self-hosted file = OPEN (Phase 5/6) */ --gi-fw-bold: 700; /* Base sizes (Latin). Arabic = × --gi-script-scale (1.1) — see :lang(ar) */ --gi-fs-h1-base: 32px; --gi-fs-h2-base: 24px; --gi-fs-h3-base: 19px; --gi-fs-h4-base: 16px; --gi-fs-body-base: 16px; /* body never below 16 px */ --gi-fs-small-base: 14px; --gi-fs-caption-base: 13px; --gi-fs-label-base: 15px; --gi-fs-button-base: 15px; --gi-fs-table-base: 14px; --gi-fs-price-base: 22px; --gi-fs-price-sm-base: 18px; --gi-script-scale: 1; /* 1.1 in Arabic */ --gi-lh-h1: 1.2; --gi-lh-h2: 1.25; --gi-lh-h3: 1.3; --gi-lh-h4: 1.35; --gi-lh-body: 1.5; --gi-lh-small: 1.45; --gi-lh-caption: 1.4; --gi-lh-control: 1.2; --gi-measure: 72ch; /* max line length for running text */ /* ------------------------------------------------------------------- 1d. PRIMITIVE · SPACE, SIZE, SHAPE (4 px base) ------------------------------------------------------------------- */ --gi-sp-0: 0; --gi-sp-1: 4px; --gi-sp-2: 8px; --gi-sp-3: 12px; --gi-sp-4: 16px; --gi-sp-5: 20px; --gi-sp-6: 24px; --gi-sp-8: 32px; --gi-sp-10: 40px; --gi-sp-12: 48px; --gi-sp-16: 64px; --gi-radius-0: 0; --gi-radius-sm: 2px; /* badges, chips */ --gi-radius: 4px; /* Précis: buttons, fields, cards, tables, panels */ --gi-radius-round: 999px; /* ONLY count bubbles and radio dots (functional) */ --gi-bw-hair: 1px; --gi-bw-strong: 2px; /* table header rule, selection bar, error field */ --gi-bw-accent: 4px; /* message start bar, selected-row start bar */ --gi-target-min: 44px; /* minimum touch target */ --gi-control-h: 44px; /* buttons, fields, steppers (Précis: dense but ≥ 44) */ --gi-icon: 20px; --gi-icon-sm: 16px; /* Layout */ --gi-container-max: 1280px; /* outer width incl. gutters */ --gi-container-text: 760px; /* legal / FAQ reading width */ --gi-gutter: 16px; /* mobile & tablet */ --gi-gutter-lg: 24px; /* ≥ 1025 px */ --gi-grid-cols: 12; /* ≥ 1025 px; 8 at 761–1024; 4 at ≤ 760 */ --gi-grid-gap: 24px; /* ≥ 1025 px; 16 px below */ /* Breakpoints (literal values in queries): xs ≤ 390 · sm 391–760 · md 761–1024 · lg 1025–1279 · xl ≥ 1280 (checked up to 1440) Must work from 320 px. Components react to their CONTAINER (container name: gi). */ /* Motion */ --gi-dur: 120ms; /* Layers */ --gi-z-sticky-nav: 20; --gi-z-header: 30; --gi-z-selbar: 40; --gi-z-whatsapp: 45; --gi-z-dropdown: 50; --gi-z-drawer: 60; --gi-z-dialog: 80; --gi-z-toast: 90; /* ------------------------------------------------------------------- 2. SEMANTIC ------------------------------------------------------------------- */ --gi-text: var(--gi-c-black); --gi-text-muted: var(--gi-c-grey-text); --gi-text-inverse: var(--gi-c-white); --gi-surface: var(--gi-c-white); --gi-surface-alt: var(--gi-c-grey-light); /* cards area, spec tables */ --gi-surface-info: var(--gi-c-blue-light); /* secondary sections, info, selected row */ --gi-surface-inverse: var(--gi-c-black); /* Précis: top bar + footer */ --gi-line: var(--gi-c-border); /* decorative rules only */ --gi-line-strong: var(--gi-c-black); --gi-accent: var(--gi-c-red); /* active menu, accents */ --gi-graphic: var(--gi-c-steel); --gi-action-quote-bg: var(--gi-c-orange); /* 1 · « Demander un devis » */ --gi-action-quote-fg: var(--gi-c-black); /* NEVER white */ --gi-action-quote-bg-hover: var(--gi-ix-orange-hover); --gi-action-cart-bg: var(--gi-c-black); /* 2 · « Ajouter au panier » / achat */ --gi-action-cart-fg: var(--gi-c-white); --gi-action-cart-bg-hover: var(--gi-ix-black-hover); --gi-action-brand-bg: var(--gi-c-red); /* 3 · CTA de marque */ --gi-action-brand-fg: var(--gi-c-white); --gi-action-brand-bg-hover: var(--gi-ix-red-hover); --gi-action-secondary-bg: var(--gi-c-white); /* 4 · contour noir */ --gi-action-secondary-fg: var(--gi-c-black); --gi-action-secondary-border: var(--gi-c-black); --gi-action-secondary-bg-hover: var(--gi-c-grey-light); --gi-action-disabled-bg: var(--gi-c-border); --gi-action-disabled-fg: var(--gi-c-grey-text); /* 6.0:1 */ --gi-focus-color: var(--gi-c-black); --gi-focus-width: 3px; --gi-focus-offset: 2px; --gi-focus-halo: var(--gi-c-white); /* keeps the ring visible on dark fills */ --gi-field-border: var(--gi-ix-field-border); --gi-field-border-hover: var(--gi-c-grey-text); --gi-field-bg: var(--gi-c-white); --gi-field-bg-disabled: var(--gi-c-grey-light); --gi-field-error: var(--gi-c-error); --gi-field-success: var(--gi-c-success); --gi-state-success: var(--gi-c-success); --gi-state-warning: var(--gi-c-warning); --gi-state-error: var(--gi-c-error); --gi-state-info: var(--gi-c-steel); --gi-stock-in: var(--gi-c-success); /* « En stock » — icon ✓ + text */ --gi-stock-order: var(--gi-c-warning); /* « Sur commande · n j » — icon clock + text */ --gi-stock-quote: var(--gi-c-steel); /* « Sur devis uniquement » — icon doc + text */ --gi-stock-off: var(--gi-c-grey-text); /* « Plus disponible » — icon ✕ + text */ /* ------------------------------------------------------------------- 3. COMPONENT ------------------------------------------------------------------- */ --gi-btn-h: var(--gi-control-h); --gi-btn-px: var(--gi-sp-4); --gi-btn-radius: var(--gi-radius); --gi-btn-fw: var(--gi-fw-semibold); --gi-btn-border: var(--gi-bw-strong); --gi-field-h: var(--gi-control-h); --gi-field-px: var(--gi-sp-3); --gi-field-radius: var(--gi-radius); --gi-badge-h: 24px; --gi-badge-px: var(--gi-sp-2); --gi-badge-radius: var(--gi-radius-sm); --gi-badge-fw: var(--gi-fw-semibold); --gi-card-radius: var(--gi-radius); --gi-card-border: var(--gi-bw-hair) solid var(--gi-line); --gi-card-shadow: none; /* Précis: flat, no decorative shadow */ --gi-table-row-py: var(--gi-sp-2); /* 8 px — dense, easy to scan */ --gi-table-cell-px: var(--gi-sp-3); --gi-table-head-rule: var(--gi-bw-strong) solid var(--gi-line-strong); --gi-table-row-rule: var(--gi-bw-hair) solid var(--gi-line); --gi-table-selected-bg: var(--gi-surface-info); --gi-table-selected-bar: var(--gi-bw-accent) solid var(--gi-line-strong); --gi-selbar-bg: var(--gi-surface); --gi-selbar-rule: var(--gi-bw-strong) solid var(--gi-line-strong); --gi-selbar-py: var(--gi-sp-3); --gi-msg-bar: var(--gi-bw-accent); --gi-header-top-h: 44px; /* top bar links are 44 px touch targets */ --gi-header-main-h: 72px; /* 56 px on mobile */ --gi-header-main-h-m: 56px; } /* Arabic: +10 % sizes, line-height ≥ 1.35 (Phase 2 §F, Phase 3 §I) */ :lang(ar) { --gi-script-scale: 1.1; --gi-lh-h1: 1.35; --gi-lh-h2: 1.35; --gi-lh-h3: 1.35; --gi-lh-h4: 1.4; --gi-lh-body: 1.6; --gi-lh-small: 1.55; --gi-lh-caption: 1.5; --gi-lh-control: 1.35; } /* Latin text inside an Arabic page keeps Latin sizes (scale follows each element's own language) */ :lang(fr), :lang(en) { --gi-script-scale: 1; --gi-lh-h1: 1.2; --gi-lh-h2: 1.25; --gi-lh-h3: 1.3; --gi-lh-h4: 1.35; --gi-lh-body: 1.5; --gi-lh-small: 1.45; --gi-lh-caption: 1.4; --gi-lh-control: 1.2; } /* Computed sizes (use these in components) — recomputed wherever the language changes */ :root, :lang(ar), :lang(fr), :lang(en) { --gi-fs-h1: calc(var(--gi-fs-h1-base) * var(--gi-script-scale)); --gi-fs-h2: calc(var(--gi-fs-h2-base) * var(--gi-script-scale)); --gi-fs-h3: calc(var(--gi-fs-h3-base) * var(--gi-script-scale)); --gi-fs-h4: calc(var(--gi-fs-h4-base) * var(--gi-script-scale)); --gi-fs-body: calc(var(--gi-fs-body-base) * var(--gi-script-scale)); --gi-fs-small: calc(var(--gi-fs-small-base) * var(--gi-script-scale)); --gi-fs-caption: calc(var(--gi-fs-caption-base) * var(--gi-script-scale)); --gi-fs-label: calc(var(--gi-fs-label-base) * var(--gi-script-scale)); --gi-fs-button: calc(var(--gi-fs-button-base) * var(--gi-script-scale)); --gi-fs-table: calc(var(--gi-fs-table-base) * var(--gi-script-scale)); --gi-fs-price: calc(var(--gi-fs-price-base) * var(--gi-script-scale)); --gi-fs-price-sm: calc(var(--gi-fs-price-sm-base) * var(--gi-script-scale)); } /* Mobile heading sizes (container ≤ 760 px) are set in components.css: H1 26 px · H2 21 px (× 1.1 in Arabic). */