/* ═══════════════════════════════════════════════════════════════════════════════ MATCH DEAL PRO — DESIGN TOKENS The single source of truth for the Pro interface's visual language. Every other stylesheet and every component consumes these variables and hardcodes nothing. WHY A SECOND TOKEN SET AND NOT THE ONE IN /index.html ---------------------------------------------------- The tokens in `/index.html` are inside a completed module (Rule 2) and are dark-only: they set `color-scheme:dark` on `:root` and encode the dark values directly. Phase 6A requires light AND dark. Editing that file to make its tokens themeable would be a refactor of a completed module, so this file restates the platform's palette under an `--mdp-` prefix instead. The prefix is not decoration: it guarantees that if the two documents are ever loaded together, neither can overwrite the other's variables. The dark values are the platform's existing pixel-tuned gold/dark-banking palette, reproduced so the two applications look like one product. The light values are new and were chosen for contrast, not for symmetry — a light theme that is the dark theme inverted fails contrast on every accent. HOW THEMING WORKS ----------------- ``. Every colour token is declared twice; nothing else in the system is theme-aware, so a third theme is one more block in this file and no change anywhere else. ═══════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Type ─────────────────────────────────────────────────────────────────── */ --mdp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --mdp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Arabic falls back through the platform stack to whatever the OS ships; no webfont is loaded for it, because a 400 KB Arabic face on a dashboard is a performance regression the requirement explicitly rules out. */ --mdp-font-ar: 'Inter', 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif; --mdp-fs-2xs: 10.5px; --mdp-fs-xs: 11.5px; --mdp-fs-sm: 12.5px; --mdp-fs-base: 14px; --mdp-fs-md: 15px; --mdp-fs-lg: 17px; --mdp-fs-xl: 21px; --mdp-fs-2xl: 26px; --mdp-fs-3xl: 33px; --mdp-fw-normal: 400; --mdp-fw-medium: 500; --mdp-fw-semibold: 600; --mdp-fw-bold: 700; --mdp-fw-black: 800; --mdp-lh-tight: 1.22; --mdp-lh-snug: 1.4; --mdp-lh-normal: 1.6; --mdp-tracking-caps: 0.08em; /* ── Spacing (4px base) ───────────────────────────────────────────────────── */ --mdp-sp-0: 0; --mdp-sp-1: 4px; --mdp-sp-2: 8px; --mdp-sp-3: 12px; --mdp-sp-4: 16px; --mdp-sp-5: 20px; --mdp-sp-6: 24px; --mdp-sp-8: 32px; --mdp-sp-10: 40px; --mdp-sp-12: 48px; --mdp-sp-16: 64px; /* ── Radius ───────────────────────────────────────────────────────────────── */ --mdp-r-xs: 5px; --mdp-r-sm: 8px; --mdp-r-md: 12px; --mdp-r-lg: 16px; --mdp-r-xl: 20px; --mdp-r-pill: 999px; /* ── Layout metrics ───────────────────────────────────────────────────────── */ --mdp-topnav-h: 60px; --mdp-sidenav-w: 252px; --mdp-sidenav-w-collapsed: 68px; --mdp-content-max: 1560px; /* ── Z-index scale. One scale, so nothing is ever "9999". ─────────────────── */ --mdp-z-base: 1; --mdp-z-sticky: 100; --mdp-z-sidenav: 200; --mdp-z-topnav: 300; --mdp-z-backdrop: 400; --mdp-z-drawer: 450; --mdp-z-modal: 500; --mdp-z-loading: 600; --mdp-z-toast: 700; --mdp-z-skip: 800; /* ── Motion. Every duration is a token so `prefers-reduced-motion` can zero all of them in one place (see base.css). ─────────────────────────────── */ --mdp-dur-instant: 80ms; --mdp-dur-fast: 140ms; --mdp-dur-normal: 220ms; --mdp-dur-slow: 340ms; --mdp-ease: cubic-bezier(0.4, 0, 0.2, 1); --mdp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── Focus ring. Declared once; every interactive element uses it verbatim, which is what makes the keyboard experience consistent. ──────────────── */ --mdp-focus-w: 2px; --mdp-focus-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════════════ DARK THEME — the platform's established palette ═══════════════════════════════════════════════════════════════════════════════ */ :root[data-mdp-theme='dark'] { color-scheme: dark; --mdp-bg: #08090D; --mdp-bg-sunken: #05060A; --mdp-bg-raised: #0D0F14; --mdp-surface: #111419; --mdp-surface-2: #15181F; --mdp-surface-3: #1B1F27; --mdp-surface-inset: rgba(255, 255, 255, .035); --mdp-overlay: rgba(4, 5, 8, .72); --mdp-glass: rgba(13, 15, 20, .88); --mdp-text: #F2EFE8; --mdp-text-strong: #FFFFFF; --mdp-text-muted: rgba(242, 239, 232, .62); --mdp-text-faint: rgba(242, 239, 232, .40); --mdp-text-inverse: #08090D; --mdp-brand: #D4A832; --mdp-brand-hover: #E4BC4A; --mdp-brand-soft: rgba(212, 168, 50, .14); --mdp-brand-border: rgba(212, 168, 50, .38); --mdp-brand-contrast: #1A1405; --mdp-accent: #2DD4BF; --mdp-accent-soft: rgba(45, 212, 191, .13); --mdp-accent-border: rgba(45, 212, 191, .34); --mdp-info: #6C9BFF; --mdp-info-soft: rgba(108, 155, 255, .13); --mdp-success: #4ADE80; --mdp-success-soft: rgba(74, 222, 128, .13); --mdp-warn: #FBBF24; --mdp-warn-soft: rgba(251, 191, 36, .13); --mdp-danger: #F87171; --mdp-danger-soft: rgba(248, 113, 113, .13); --mdp-neutral: rgba(242, 239, 232, .55); --mdp-neutral-soft: rgba(242, 239, 232, .08); --mdp-border: rgba(255, 255, 255, .09); --mdp-border-subtle: rgba(255, 255, 255, .055); --mdp-border-strong: rgba(255, 255, 255, .18); --mdp-field-bg: #101318; --mdp-field-bg-focus: #14181F; --mdp-field-border: rgba(255, 255, 255, .12); --mdp-shadow-sm: 0 2px 10px rgba(0, 0, 0, .40); --mdp-shadow-md: 0 10px 32px rgba(0, 0, 0, .46); --mdp-shadow-lg: 0 24px 64px rgba(0, 0, 0, .58); --mdp-focus-ring: #F0CC5A; --mdp-skeleton: rgba(255, 255, 255, .06); --mdp-skeleton-shine: rgba(255, 255, 255, .12); --mdp-track: rgba(255, 255, 255, .08); } /* ═══════════════════════════════════════════════════════════════════════════════ LIGHT THEME Not an inversion. The brand gold is darkened to #96741A for text and borders because #D4A832 on white is 2.1:1 and fails AA at every size; the gold stays at full saturation only where it is a large filled surface with dark text on it. ═══════════════════════════════════════════════════════════════════════════════ */ :root[data-mdp-theme='light'] { color-scheme: light; --mdp-bg: #F6F7F9; --mdp-bg-sunken: #EEF0F4; --mdp-bg-raised: #FFFFFF; --mdp-surface: #FFFFFF; --mdp-surface-2: #FAFBFC; --mdp-surface-3: #F2F4F7; --mdp-surface-inset: rgba(16, 24, 40, .035); --mdp-overlay: rgba(16, 24, 40, .44); --mdp-glass: rgba(255, 255, 255, .92); --mdp-text: #16202E; --mdp-text-strong: #0A101A; --mdp-text-muted: rgba(22, 32, 46, .66); --mdp-text-faint: rgba(22, 32, 46, .46); --mdp-text-inverse: #FFFFFF; --mdp-brand: #96741A; --mdp-brand-hover: #7C5F12; --mdp-brand-soft: rgba(212, 168, 50, .16); --mdp-brand-border: rgba(150, 116, 26, .42); --mdp-brand-contrast: #FFFFFF; --mdp-accent: #0F766E; --mdp-accent-soft: rgba(15, 118, 110, .11); --mdp-accent-border: rgba(15, 118, 110, .32); --mdp-info: #1D4ED8; --mdp-info-soft: rgba(29, 78, 216, .10); --mdp-success: #15803D; --mdp-success-soft: rgba(21, 128, 61, .11); --mdp-warn: #A15C07; --mdp-warn-soft: rgba(161, 92, 7, .12); --mdp-danger: #B91C1C; --mdp-danger-soft: rgba(185, 28, 28, .10); --mdp-neutral: rgba(22, 32, 46, .58); --mdp-neutral-soft: rgba(22, 32, 46, .06); --mdp-border: rgba(16, 24, 40, .12); --mdp-border-subtle: rgba(16, 24, 40, .08); --mdp-border-strong: rgba(16, 24, 40, .22); --mdp-field-bg: #FFFFFF; --mdp-field-bg-focus: #FFFFFF; --mdp-field-border: rgba(16, 24, 40, .18); --mdp-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --mdp-shadow-md: 0 8px 24px rgba(16, 24, 40, .10); --mdp-shadow-lg: 0 20px 48px rgba(16, 24, 40, .16); --mdp-focus-ring: #7C5F12; --mdp-skeleton: rgba(16, 24, 40, .07); --mdp-skeleton-shine: rgba(16, 24, 40, .13); --mdp-track: rgba(16, 24, 40, .09); } /* ═══════════════════════════════════════════════════════════════════════════════ HIGH CONTRAST Honoured rather than overridden: a customer who has asked their OS for more contrast gets stronger borders and no translucency, in both themes. ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-contrast: more) { :root { --mdp-border: currentColor; --mdp-border-subtle: currentColor; --mdp-focus-w: 3px; } :root[data-mdp-theme='dark'] { --mdp-text-muted: rgba(242, 239, 232, .86); } :root[data-mdp-theme='light'] { --mdp-text-muted: rgba(22, 32, 46, .86); } }