/* Edara Storefront Admin — Material Design 3 Tokens match extensions-portal/public/styles/main.css so the app looks native inside the portal shell — with the same one deliberate divergence payroll carries: the status roles (tertiary/success/warning) and --outline-variant below are re-toned into one coherent family across both themes. Primary and secondary are untouched, which is what keeps the app reading native. This file is no longer a byte-for-byte vendored copy of the portal — see dev/vendored-assets.yml for exactly what diverges and why, and CLAUDE.md for the rule this replaces ("diff it against the portal, don't edit values here"). Ported from payroll's frontend/public/styles/main.css, which is where every color/type/shape/space/elevation/motion value below was actually derived and measured; diff against THAT file, not the portal, before changing a value. Before this file the admin's primary was #6750a4 — Material Design 3's BASELINE DEFAULT purple, i.e. the colour you get for never choosing one. HOW DARK MODE IS DECIDED (extension-specific — payroll uses only a `.dark` class; this admin needs three selectors, because it can be embedded): 1. Embedded — ext-embed.js reads the shared `edara_theme` cookie and also receives live `shell:theme` messages, stamping BOTH `data-theme` and the `.dark` class on . The shell always wins; the admin must never disagree with the frame around it. 2. Standalone — theme-init.js applies a saved choice pre-paint, else the OS. Hence three selectors for one palette: `[data-theme="dark"]` and `.dark` share a declaration list, and the media query repeats it for OS-follow. The repeat is unavoidable without a build step — CSS cannot share one declaration list across an attribute selector and a media query. Keep the three blocks in sync; that is the same trade documented in price-checker's main.css. */ :root { /* Declared per theme so the browser paints its own widgets — scrollbars above all — to match. */ color-scheme: light; --primary:#00629d; --primary-container:#cfe5ff; --on-primary:#fff; --on-primary-container:#001d34; --secondary:#00658f; --secondary-container:#c8e6ff; --on-secondary-container:#001e2e; --tertiary:#775a00; --tertiary-container:#f1e1bf; --on-tertiary-container:#251a00; --accent:#774988; --on-accent:#fff; --accent-container:#f0daf9; --on-accent-container:#26132d; --error:#ba1a1a; --on-error:#ffffff; --error-container:#ffdad6; --on-error-container:#410002; --success:#29823b; --success-container:#cfecd1; --on-success-container:#002108; --warning:#8c5000; --warning-container:#faddc2; --on-warning-container:#251a00; --surface:#fcfcff; --surface-container-lowest:#fff; --surface-container-low:#f6f7fa; --surface-container:#f0f2f5; --surface-container-high:#eaedf1; --surface-container-highest:#e4e7ec; --surface-variant:#dee3eb; --on-surface:#1a1c1e; --on-surface-variant:#42474e; --outline:#72777f; --outline-variant:#dee0e4; --inverse-surface:#2f3033; --inverse-on-surface:#f1f0f4; /* The palette below is the complete MD3 role set, kept whole even where a role is currently unused: a partial palette invites the next person to invent a colour. The SCALES are the opposite — an unused step there is dead weight, so they carry only what is used. See payroll's main.css for the full OKLCH re-tone derivation this block carries verbatim. */ --background:var(--surface); --side-nav-w:236px; /* ── MD3 type scale ────────────────────────────────────────────────────── Sizes are extensions-portal's --typo-* tokens, names and values, so the two surfaces render at identical sizes and the fleet shares one vocabulary. -lh/-ls are new here — Edara 3's MD3 line-height and letter-spacing, which this file never carried; every role used to inherit a flat line-height with no tracking at all. [dir=rtl] below zeroes every -ls — Arabic is cursive and positive tracking breaks glyph joins. display-sm and headline-md are new roles, filled in from payroll rather than invented. */ --typo-display-sm:36px; --typo-display-sm-lh:44px; --typo-display-sm-ls:0; --typo-headline-md:28px; --typo-headline-md-lh:36px; --typo-headline-md-ls:0; --typo-headline-sm:24px; --typo-headline-sm-lh:32px; --typo-headline-sm-ls:0; --typo-title-lg:22px; --typo-title-lg-lh:28px; --typo-title-lg-ls:0; --typo-title-md:16px; --typo-title-md-lh:24px; --typo-title-md-ls:.1px; --typo-title-sm:14px; --typo-title-sm-lh:20px; --typo-title-sm-ls:.1px; --typo-body-lg:16px; --typo-body-lg-lh:24px; --typo-body-lg-ls:.5px; --typo-body-md:14px; --typo-body-md-lh:20px; --typo-body-md-ls:.25px; --typo-body-sm:12px; --typo-body-sm-lh:16px; --typo-body-sm-ls:.4px; --typo-label-lg:14px; --typo-label-lg-lh:20px; --typo-label-lg-ls:.1px; --typo-label-md:12px; --typo-label-md-lh:16px; --typo-label-md-ls:.5px; --typo-label-sm:11px; --typo-label-sm-lh:16px; --typo-label-sm-ls:.5px; /* ── MD3 shape scale ───────────────────────────────────────────────────── Replaces the previous 6 --radius-* steps (4/8/12/16/28/9999) with payroll's names, so the two apps share vocabulary rather than merely matching values by coincidence. */ --shape-xs:4px; --shape-sm:8px; --shape-md:12px; --shape-lg:16px; --shape-xl:28px; /* ── 4dp spacing grid ──────────────────────────────────────────────────── Replaces the previous --space-xs..xxl (4/8/16/24/32/40/48) naming; values collapse onto payroll's 4dp ladder (4/8/12/16/24/32). */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; /* ── MD3 state layers ──────────────────────────────────────────────────── MD3 expresses interaction as a tinted overlay at a fixed opacity, not a hand-picked hover colour. Applied via color-mix so one rule works on any surface and in both themes. */ --state-hover:0.08; --state-press:0.12; /* ── MD3 elevation ─────────────────────────────────────────────────────── Levels are semantic, so the numbers keep MD3's meaning. Replaces the previous primary-tinted --shadow-level1..3: those read as a blue haze against a dark surface, so this admin now follows payroll (and MD3 proper) in keeping shadows neutral in BOTH themes and using the surface-container ladder, not colour, as the primary depth signal. Elevation is reserved for things that FLOAT OVER content: the modal, the toast, the row menu, the sheet and the account menu — never a resting card. */ --elev-1:0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15); --elev-2:0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15); --elev-3:0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.30); /* Same stack as extensions-portal so the admin reads as native in the shell. Roboto is the accented-Latin fallback Inter doesn't cover; see fonts/fonts.css. */ --font-family:'Inter','Roboto',sans-serif; --font-headline:'Manrope','Inter',sans-serif; /* ── Motion ─────────────────────────────────────────────────────────────── Replaces --ease-standard/--duration-short4/--duration-medium2 with payroll's --motion-base/--motion-ease. `--motion-` is namespaced rather than reusing the portal's own --ease-standard name: three motion vocabularies already disagree across the fleet (the portal's --duration-*/--ease-*, Edara 3's DESIGN.md, payroll's), and the same name with a different curve is worse than a different name. Zeroed under prefers-reduced-motion at the token level, so every consumer collapses for free. --ease-nav is the rail's own collapse/expand curve — Edara 3's "the width animation needs a slightly gentler settle" than the app default. */ --motion-base:200ms; --motion-ease:cubic-bezier(.4,0,.2,1); --ease-nav:cubic-bezier(.25,.8,.25,1); /* ── Semantic: info ────────────────────────────────────────────────────── Edara 3 ships four semantic pairs (success/warning/info/error); this app had three. Kept whole per the palette rule above even though nothing consumes it yet. */ --info:#017aad; --info-container:#e5f5fc; --on-info-container:#001f2a; /* ── Chart palette ─────────────────────────────────────────────────────── Named --chart-*, not --data-*, for CATEGORICAL data only — a series, a breakdown — never for status; a status value uses the system roles above (success/warning/error) instead. */ --chart-1:#1a79cb; --chart-2:#d25806; --chart-3:#087f5b; --chart-4:#7048e8; --chart-5:#d08700; --chart-6:#ae3ec9; --chart-7:#0d8091; --chart-8:#d6336c; --chart-9:#639c13; --chart-10:#c92a2a; --chart-11:#4263eb; --chart-12:#2f9741; /* ── Extension-specific — payroll has no counterpart, kept from before ── --primary-hover exists because filter:brightness() is theme-blind (see styles.css); the header tokens because this admin's topbar is a glass header the portal shell doesn't dictate; --min-touch-target as the admin's own desktop touch floor (48dp applies only below 768px, see styles.css's phone tier). */ --primary-hover: #004a78; --header-bg: rgba(252, 252, 255, 0.8); --header-height: 64px; --min-touch-target: 44px; /* --shape-full has no counterpart in payroll's scale — its pills top out at --shape-xl (28px) because nothing there stands taller. This admin's .status pill and a couple of true circles need a radius that clamps regardless of height, so the literal 9999px step survives. */ --shape-full: 9999px; } @media(prefers-reduced-motion:reduce){ :root{--motion-base:0ms} } /* Explicit dark — the portal shell (both attributes are stamped by ext-embed.js) or a saved standalone choice. KEEP IN SYNC with the media block below. */ :root[data-theme="dark"], :root.dark { color-scheme: dark; --primary:#99cbff; --primary-container:#004a78; --on-primary:#003354; --on-primary-container:#cfe5ff; --secondary:#87ceff; --secondary-container:#004c6d; --on-secondary-container:#c8e6ff; --tertiary:#f7be00; --tertiary-container:#5a4300; --on-tertiary-container:#f1e1bf; --accent:#dfb3f0; --on-accent:#2d1735; --accent-container:#593667; --on-accent-container:#f0daf9; --error:#ffb4ab; --on-error:#690005; --error-container:#93000a; --on-error-container:#ffdad6; --success:#8dd891; --success-container:#005318; --on-success-container:#cfecd1; --warning:#ffcc66; --warning-container:#5c4300; --on-warning-container:#faddc2; --surface:#1a1c1e; --surface-container-lowest:#0e1012; --surface-container-low:#1e2022; --surface-container:#282a2c; --surface-container-high:#323436; --surface-container-highest:#3d3f42; --surface-variant:#42474e; --on-surface:#e2e2e5; --on-surface-variant:#c2c7cf; --outline:#8c9199; --outline-variant:#383a3d; --inverse-surface:#e2e2e5; --inverse-on-surface:#2f3033; --info:#7fd3f5; --info-container:#00394d; --on-info-container:#e5f5fc; /* Base steps, not the light-mode substitutes above: all 12 pass 3:1 against #1a1c1e as Edara 3's plain values, so no correction is needed. */ --chart-2:#f76707; --chart-5:#f59f00; --chart-9:#74b816; --chart-12:#37b24d; --primary-hover: #67b1f4; --header-bg: rgba(26, 28, 30, 0.8); } /* OS-follow — only when nothing explicit is set. `:not([data-theme="light"])` keeps a user's or the shell's explicit LIGHT choice from being overridden by a dark OS. KEEP IN SYNC with the block above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { color-scheme: dark; --primary:#99cbff; --primary-container:#004a78; --on-primary:#003354; --on-primary-container:#cfe5ff; --secondary:#87ceff; --secondary-container:#004c6d; --on-secondary-container:#c8e6ff; --tertiary:#f7be00; --tertiary-container:#5a4300; --on-tertiary-container:#f1e1bf; --accent:#dfb3f0; --on-accent:#2d1735; --accent-container:#593667; --on-accent-container:#f0daf9; --error:#ffb4ab; --on-error:#690005; --error-container:#93000a; --on-error-container:#ffdad6; --success:#8dd891; --success-container:#005318; --on-success-container:#cfecd1; --warning:#ffcc66; --warning-container:#5c4300; --on-warning-container:#faddc2; --surface:#1a1c1e; --surface-container-lowest:#0e1012; --surface-container-low:#1e2022; --surface-container:#282a2c; --surface-container-high:#323436; --surface-container-highest:#3d3f42; --surface-variant:#42474e; --on-surface:#e2e2e5; --on-surface-variant:#c2c7cf; --outline:#8c9199; --outline-variant:#383a3d; --inverse-surface:#e2e2e5; --inverse-on-surface:#2f3033; --info:#7fd3f5; --info-container:#00394d; --on-info-container:#e5f5fc; --chart-2:#f76707; --chart-5:#f59f00; --chart-9:#74b816; --chart-12:#37b24d; --primary-hover: #67b1f4; --header-bg: rgba(26, 28, 30, 0.8); } } /* Arabic swaps the body face only — Manrope has no Arabic coverage, so headlines fall to Cairo too rather than to a silent browser fallback. Every -ls above tracks LTR Latin; Arabic is cursive, so positive tracking breaks glyph joins and the whole set collapses to zero rather than carrying a second per-role table nobody would keep in sync. */ html[dir="rtl"] { --font-family: 'Cairo', 'Roboto', sans-serif; --font-headline: 'Cairo', sans-serif; --typo-display-sm-ls:0; --typo-headline-md-ls:0; --typo-headline-sm-ls:0; --typo-title-lg-ls:0; --typo-title-md-ls:0; --typo-title-sm-ls:0; --typo-body-lg-ls:0; --typo-body-md-ls:0; --typo-body-sm-ls:0; --typo-label-lg-ls:0; --typo-label-md-ls:0; --typo-label-sm-ls:0; }