/* ========================================================================== tokens.css — the single source of every design value. BadgePro. Direction: Modern Industrial Luxury (ADR-003). RULE: no other stylesheet may contain a raw hex colour, a raw px spacing value, or a raw ms duration. If a value is needed, it is added here first. Every colour below is a passing row in tools/contrast.ps1 (27/27 pass). Measured ratios are in the comments — do not change a value without re-running that script. ========================================================================== */ :root { /* ---------------------------------------------------------------- COLOUR */ /* Direction since 2026-10-08 (ADR-014): bright white paper, navy ink, royal blue accent, coral reserved for the primary CTA. Every ratio below was measured; re-run tools/contrast.mjs after any change. */ /* Paper surface — all commercial, explanatory and conversion content. */ --paper: #FFFFFF; /* page ground */ --on-accent: #FFFFFF; /* text/icon on blue-500+, coral-500, wa-green (ratios at each use) */ --paper-2: #F3F6FB; /* alternating bands (cool, very light) */ --paper-3: #E6ECF5; /* table header, pressed states */ --paper-hi: #E9F0FD; /* hero key light (decorative) */ --ink: #0E1A33; /* navy ink 17.29:1 on paper */ --ink-2: #3F4B63; /* secondary prose 8.76:1 */ --ink-3: #5B677D; /* meta, input borders 5.70:1 / 5.27:1 on paper-2 */ --rule: #DCE3EE; /* hairline (decorative) */ --rule-strong: #C3CDDD; /* outline of secondary buttons (decorative: labels carry meaning) */ /* Navy surface (formerly "studio") — footer, drawer, product stages. */ --studio: #0C1A3A; /* deep navy ground */ --studio-2: #13234A; /* raised panels on navy */ --studio-3: #1B2E5C; /* card bodies on navy */ --on-studio: #F2F5FB; /* text on navy 15.70:1 */ --on-studio-2: #AEB9CF; /* secondary on navy 8.69:1 */ --rule-dark: #24365F; /* hairline on navy (decorative) */ --border-control-dark: #6A7AA0; /* control boundary on navy, >= 3:1 */ /* Accent — royal blue. Each step has one job. --blue-600 accent TEXT on paper (6.57:1, 6.07:1 on paper-2). --blue-500 FILLS, rules, dots, focus ring (5.17:1 vs paper: also passes as text, and comfortably as a 3:1 non-text boundary). --blue-400 accent text on navy only (8.22:1). */ --blue-700: #163DA8; /* pressed / hover text 9.26:1 */ --blue-600: #1E50D8; --blue-500: #2563EB; --blue-400: #8FB3FF; --blue-100: #E8F0FE; /* faint wash; blue-600 on it 5.74:1 */ /* Coral — the primary CTA and nothing else, so it always means "devis". #D6391F is the lightest coral that holds a white label at AA. */ --coral-500: #D6391F; /* fill; white label 4.70:1 */ --coral-600: #C7341C; /* hover; white label 5.33:1 */ --coral-700: #B02D17; /* pressed */ /* Brass — MATERIAL ONLY. Appears exclusively inside rendered card gradients to simulate foil sheen. Never a UI colour, never carries text, therefore exempt from text contrast. */ --brass-hi: #E8D4A8; --brass-lo: #8A6E3C; /* Organisation band colours for the sample badge renders. Real Moroccan identification cards almost always carry a coloured header band with the organisation name, so the renders use one too. Each is verified for a white label in tools/contrast.ps1. These are SAMPLE colours on fictional organisations - they are not any real brand. */ --band-corporate: #1D3A66; /* white label 11.36:1 */ --band-sport: #9B1B22; /* white label 8.16:1 */ --band-assoc: #16624A; /* white label 7.29:1 */ --band-hotel: #2A2E33; /* white label 13.66:1 */ --band-visitor: #A2441F; /* white label 6.21:1 */ --band-tech: #101214; /* = studio, white label 18.77:1 */ /* Manrope carries no Arabic. Moroccan cards are routinely bilingual, so the Arabic line falls back to whatever the system provides - no extra font download, which keeps the zero-third-party budget intact. */ --font-ar: 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Arial', sans-serif; /* Comparison keys for the spec table (decorative; values are text-labelled). Three clearly separable steps: neutral, light blue, deep blue. */ --series-1: var(--ink-3); --series-2: var(--blue-400); --series-3: var(--blue-700); /* Semantic */ --danger: #9B2C1B; /* 6.25:1 on paper */ --danger-wash: #FBEAE6; --success: #1F5D3F; /* 6.88:1 on paper */ --success-wash: #E7F1EB; /* WhatsApp. NOTE: the official brand green #25D366 gives only 1.98:1 with a white label - unusable for a button. These are darkened to pass. */ --wa-green: #1A7F45; /* white label 5.04:1; 4.63:1 vs paper */ --wa-green-dark: #19733F; /* white label 5.89:1 */ --wa-wash: #EEF8F2; /* hover wash behind the outlined button */ /* Per-surface aliases. Components reference these, so a component can be moved between surfaces by changing one wrapper class. */ --surface: var(--paper); --surface-2: var(--paper-2); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --hairline: var(--rule); --accent-text: var(--blue-600); --focus-color: var(--blue-500); /* ------------------------------------------------------------ TYPOGRAPHY */ --font-sans: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Fluid scale. clamp() with a vw midpoint means zero type breakpoints. */ --fs-display: clamp(2.375rem, 1.55rem + 3.3vw, 4.5rem); --fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem); --fs-h3: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); --fs-lead: clamp(1.0625rem, 0.99rem + 0.42vw, 1.3125rem); --fs-body: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.75rem; --fw-regular: 400; --fw-medium: 500; --fw-semi: 650; --fw-bold: 700; --fw-heavy: 800; /* Negative tracking on large type, positive on eyebrows. This pairing is the main reason the page reads as designed rather than defaulted. */ --ls-display: -0.035em; --ls-h2: -0.025em; --ls-h3: -0.012em; --ls-body: 0; --ls-eyebrow: 0.14em; --lh-display: 0.98; --lh-h2: 1.06; --lh-h3: 1.25; --lh-lead: 1.55; --lh-body: 1.65; --measure: 68ch; /* prose */ --measure-tight: 54ch; /* leads */ /* --------------------------------------------------------------- SPACING */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.5rem; /* 24px */ --sp-6: 2rem; /* 32px */ --sp-7: 3rem; /* 48px */ --sp-8: 4rem; /* 64px */ --sp-9: 6rem; /* 96px */ --sp-10: 8rem; /* 128px */ /* Two registers: tight inside a component, generous between sections. */ --section-y: clamp(4rem, 2.5rem + 7vw, 8.5rem); /* ---------------------------------------------------------------- LAYOUT */ --container: 1240px; --container-narrow: 820px; --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem); --grid-gap: clamp(1rem, 0.7rem + 1.2vw, 2rem); --header-h: 64px; --header-h-lg: 76px; /* Intrinsic width of the hero photograph: never displayed larger. */ --hero-art-max: 630px; /* Cloudflare Turnstile managed widget height (reserved, no layout shift). */ --turnstile-h: 65px; /* ----------------------------------------------------- RADII & ELEVATION */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* The real CR80 corner radius. Using the true value is what makes the renders read as cards rather than as rounded rectangles. */ --r-card: 3.4mm; /* One shadow language: a tight contact shadow plus a wide ambient one. Never a single blurred drop. */ --sh-1: 0 1px 2px rgba(21, 23, 26, .05), 0 6px 18px -8px rgba(21, 23, 26, .10); --sh-2: 0 2px 4px rgba(21, 23, 26, .06), 0 14px 32px -10px rgba(21, 23, 26, .16); --sh-3: 0 4px 8px rgba(21, 23, 26, .08), 0 32px 64px -16px rgba(21, 23, 26, .28); --sh-studio: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 60px -14px rgba(0, 0, 0, .68); /* Floating WhatsApp button: same two-layer language, green-tinted ambient. */ --sh-fab: 0 2px 6px rgba(21, 23, 26, .18), 0 14px 34px -10px rgba(26, 127, 69, .55); --sh-fab-hover: 0 4px 10px rgba(21, 23, 26, .22), 0 20px 44px -10px rgba(26, 127, 69, .62); /* Translucent washes (hover fills, scrim, button sheen). */ --wash-ink: rgba(21, 23, 26, .04); /* ghost button hover on paper */ --wash-light: rgba(255, 255, 255, .07); /* ghost button hover on studio */ --wash-drawer: rgba(255, 255, 255, .05); /* drawer link hover */ --scrim: rgba(8, 9, 10, .6); /* drawer backdrop */ --sheen: rgba(255, 255, 255, .28); /* CTA hover sheen */ --print-bg: #FFFFFF; --print-fg: #000000; /* ----------------------------------------------------------------- FOCUS */ --focus-ring: 3px; --focus-offset: 3px; --focus-color-dark: var(--blue-400); /* ---------------------------------------------------------------- MOTION */ --dur-1: 160ms; /* press, colour change */ --dur-2: 240ms; /* hover lift, small reveals */ --dur-3: 380ms; /* section entrance */ --dur-4: 560ms; /* hero card reveal only */ /* Object motions, outside the four UI steps (docs/MOTION-GUIDELINES.md). */ --dur-spin: 700ms; /* busy spinner, one turn */ --dur-settle: 1100ms; /* hero photograph settling */ --dur-halo: 1200ms; /* floating WhatsApp halo, one pulse */ --dur-swing: 1600ms; /* CTA-band badge swinging to rest */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-inout: cubic-bezier(.45, .05, .55, .95); --ease-spring: cubic-bezier(.34, 1.46, .64, 1); --stagger: 60ms; /* Delays (choreography offsets, not durations). The hero sequence: words from 60ms at --stagger, the photo curtain at 180ms, the copy below the H1 from 420ms at 80ms steps, the accent stroke at 620ms, caption and sector strip from 640ms. */ --delay-word: 60ms; --delay-frame: 180ms; --delay-copy: 420ms; --step-copy: 80ms; --delay-stroke: 620ms; --delay-strip: 640ms; --delay-swing: 120ms; /* CTA-band badge */ --step-drawer: 40ms; /* drawer links, after --delay-word */ --delay-rule: 160ms; /* section eyebrow rule */ --delay-tick: 260ms; /* compare ticks */ --step-num: 120ms; /* process numerals: start and step */ --delay-halo: 500ms; /* FAB halo */ /* Pointer parallax, written by animation.js, consumed by motion.css. Declared here so the hero is correct before JS runs. */ --px: 0; --py: 0; /* Card material. The 1px top highlight plus a weighted bottom edge is what makes a CSS rectangle read as 0.76mm of PVC rather than a flat shape. */ --sh-card-edge: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -2px 0 rgba(0, 0, 0, .20), inset 1px 0 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(0, 0, 0, .12); --sh-card-edge-dark: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 0 rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .07), inset -1px 0 0 rgba(0, 0, 0, .40); --z-card: 1; --z-stage: 3; --z-drawer: 40; --z-header: 50; --z-fab: 35; /* below the drawer (40) so it can never cover it */ --z-sticky: 45; } /* -------------------------------------------------------------------------- Studio surface. Applied to a section wrapper; re-points the aliases so every component inside renders correctly on dark with no component-level dark variant. This is what makes "one system, two lighting conditions" (ADR-003) true in code rather than only in prose. -------------------------------------------------------------------------- */ .on-studio { --surface: var(--studio); --surface-2: var(--studio-2); --fg: var(--on-studio); --fg-2: var(--on-studio-2); --fg-3: var(--on-studio-2); --hairline: var(--rule-dark); --accent-text: var(--blue-400); --focus-color: var(--blue-400); --sh-1: var(--sh-studio); --sh-2: var(--sh-studio); }