/** * mx-theme tokens.css — v0.1.0 * * MX design tokens, ported 1:1 from the app (mx-app 5.0.0 src/theme/). * Canonical brand orange is #FF9800. Pick it once (here), use it everywhere. * * Usage rules baked into these tokens (do not work around them): * - Compliance status renders as FILLED badges; price movement renders as * PLAIN TINTED TEXT ("▲ +1.2%") — same green/red hues, different form, * so "up today" never reads as "halal". * - Doubtful/mixed is ALWAYS an OUTLINED pill (distinct shape), so amber * never blurs into brand orange. * - Orange TEXT on light backgrounds is Burnt Orange #B45000 (WCAG); * #FF9800 is reserved for dark backgrounds and filled surfaces. * - #0A0A0A ink is for the wordmark ONLY — surfaces never use pure black. * - The canvas stays ~95% neutral; the only saturated pixels are orange * (navigation/action) and green/red (meaning). * * Dark is the site default (D2): dark values live on :root so no-JS * visitors and the pre-boot frame are dark. The boot script sets * data-theme immediately in , before any stylesheet loads. */ :root, [data-theme="dark"] { color-scheme: dark; /* Brand (mode-independent) */ --mx-brand: #FF9800; --mx-brand-pressed: #E68600; --mx-brand-text: #B45000; --mx-ink: #0A0A0A; /* Surfaces + text */ --mx-bg: #0D0D0F; --mx-card: #17171A; --mx-bg-elevated: #17171A; --mx-card-elevated: #212126; --mx-text: #F2F2F0; --mx-text-2: #9C9CA1; --mx-divider: #26262A; /* Action */ --mx-link: #FF9800; --mx-nav-active: #FF9800; --mx-nav-inactive: #71717A; --mx-on-brand: #111113; /* Meaning */ --mx-compliant: #34D399; --mx-noncompliant: #F87171; --mx-doubtful: #D97706; --mx-on-compliant: #0D0D0F; --mx-on-noncompliant: #0D0D0F; /* Type — Inter throughout; hierarchy through WEIGHT, never typeface */ --mx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mx-w-regular: 400; --mx-w-medium: 500; --mx-w-semibold: 600; --mx-type-display: 2.125rem; /* 34px — web addition for heroes */ --mx-type-display-lh: 2.5rem; /* 40px */ --mx-type-title: 1.375rem; /* 22px */ --mx-type-title-lh: 1.75rem; /* 28px */ --mx-type-heading: 1.0625rem; /* 17px */ --mx-type-heading-lh: 1.375rem; /* 22px */ --mx-type-body: 0.9375rem; /* 15px */ --mx-type-body-lh: 1.3125rem; /* 21px */ --mx-type-label: 0.8125rem; /* 13px */ --mx-type-label-lh: 1.125rem; /* 18px */ --mx-type-caption: 0.75rem; /* 12px */ --mx-type-caption-lh: 1rem; /* 16px */ /* Layout — quiet confidence: generous whitespace, 12–16px card radii, hairline dividers. No gradients, no decoration. */ --mx-space-xs: 4px; --mx-space-sm: 8px; --mx-space-md: 12px; --mx-space-lg: 16px; --mx-space-xl: 24px; --mx-space-xxl: 32px; --mx-radius-card: 12px; --mx-radius-card-lg: 16px; --mx-radius-btn: 10px; --mx-radius-pill: 999px; --mx-hairline: 1px; --mx-container: 1160px; /* Elevation — shadows stay near-invisible in dark; surface steps carry elevation instead (Apple HIG dark-mode pattern, as in the app). */ --mx-shadow-card: none; --mx-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45); } [data-theme="light"] { color-scheme: light; --mx-bg: #FAFAF7; --mx-card: #FFFFFF; --mx-bg-elevated: #FAFAF7; --mx-card-elevated: #ECECE6; --mx-text: #111113; --mx-text-2: #5F5F64; --mx-divider: #E8E8E3; --mx-link: #B45000; --mx-nav-active: #FF9800; --mx-nav-inactive: #8E8E93; --mx-on-brand: #111113; --mx-compliant: #16A34A; --mx-noncompliant: #DC2626; --mx-doubtful: #D97706; --mx-on-compliant: #FFFFFF; --mx-on-noncompliant: #FFFFFF; --mx-shadow-card: 0 1px 2px rgba(17, 17, 19, 0.04); --mx-shadow-pop: 0 8px 24px rgba(17, 17, 19, 0.12); } /* --------------------------------------------------------------------- * Bridge: mx-feed-web (--mxfw-*) — W7 * Per the plugin's 1.0.0 contract, the theme overrides its tokens; this * also makes data-theme the single mode driver, outranking the plugin's * prefers-color-scheme auto mode and .mxfw-dark/.mxfw-light classes. * ------------------------------------------------------------------- */ html .mxfw { --mxfw-bg: transparent; --mxfw-card: var(--mx-card); --mxfw-card-2: var(--mx-card-elevated); --mxfw-text: var(--mx-text); --mxfw-text-2: var(--mx-text-2); --mxfw-divider: var(--mx-divider); --mxfw-accent: var(--mx-link); --mxfw-fill: var(--mx-brand); --mxfw-fill-press: var(--mx-brand-pressed); --mxfw-on-fill: var(--mx-on-brand); --mxfw-danger: var(--mx-noncompliant); --mxfw-good: var(--mx-compliant); --mxfw-font: var(--mx-font); --mxfw-shadow: var(--mx-shadow-card); } /* --------------------------------------------------------------------- * Bridge: mx-static-search (--mxmc-*) * The search widget styles itself from these tokens; mapping them onto * the --mx-* layer makes it native in both modes with zero overrides. * (W7 adds the equivalent --mxfw-* bridge for mx-feed-web.) * ------------------------------------------------------------------- */ :root { --mxmc-font-family: var(--mx-font); --mxmc-surface: var(--mx-card); --mxmc-text: var(--mx-text); --mxmc-text-secondary: var(--mx-text-2); --mxmc-text-muted: var(--mx-text-2); --mxmc-border: var(--mx-divider); --mxmc-border-subtle: var(--mx-divider); --mxmc-radius-lg: var(--mx-radius-card); --mxmc-radius-pill: var(--mx-radius-pill); --mxmc-shadow-lg: var(--mx-shadow-pop); --mxmc-accent: var(--mx-brand); --mxmc-accent-ring: color-mix(in srgb, var(--mx-brand) 20%, transparent); /* Hover stays neutral (canvas ~95% neutral rule) rather than orange-soft. */ --mxmc-accent-soft: var(--mx-card-elevated); --mxmc-highlight: color-mix(in srgb, var(--mx-brand) 24%, transparent); --mxmc-chip-bg: var(--mx-card-elevated); --mxmc-ok: var(--mx-compliant); --mxmc-ok-soft: color-mix(in srgb, var(--mx-compliant) 16%, transparent); --mxmc-no: var(--mx-noncompliant); --mxmc-no-soft: color-mix(in srgb, var(--mx-noncompliant) 16%, transparent); --mxmc-z-dropdown: 20; }