/* ══════════════════════════════════════════════════════════════════════════
   Edara Extensions — shared design tokens (Material Design 3)
   SOURCE OF TRUTH. Consumed as a real <link>, loaded BEFORE main.css, in:
     price-checker / barcode-print / slack-connect
       -> frontend/public/styles/edara-tokens.css
   Port changes here first, copy, then diff -q every target before committing
   -- never fork a per-repo variant. See README.md in this folder.

   Lifted verbatim from payroll/frontend/public/styles/main.css:9-270, the
   fleet's most token-complete stylesheet (137 type-scale tokens vs 0-25 in
   the three targets; 8 hardcoded font-size:Npx vs 122-264). Payroll itself is
   NOT converted to consume this file -- it stays the independent reference
   implementation you diff against.

   Brand color is the one deliberate per-app divergence. price-checker and
   barcode-print take --primary #00629d unchanged. slack-connect overrides
   --primary/--on-primary/--primary-container/--on-primary-container (+ .dark
   twins) in its own main.css, after this file loads, to keep its aubergine
   identity -- see slack-connect/DESIGN.md and extensions-analytics's
   ext-embed.js ("hide your chrome, keep your identity").

   Invariant every consumer must hold for any brand override: light
   --X-container and dark --on-X-container are the SAME hex, for every role
   (both are MD3 tone 90). This is what lets dark mode be one .dark block
   instead of two duplicated ones.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  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;
  --info:#017aad; --info-container:#e5f5fc; --on-info-container:#001f2a;

  --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 page background is a ROLE, not its own colour. A literal #f8f9fa sat
     BETWEEN --surface and --surface-container-low, compressing the ramp so a
     card measured 1.02:1 against the page it sits on. */
  --background:var(--surface);

  /* Type scale. The -lh/-ls companions are what make this a scale rather than a
     list of sizes: setting a size without its line-height is what shifts layout. */
  --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;

  /* Was 11 arbitrary radii (4/6/8/10/12/14/16/20/22/24). */
  --shape-xs:4px; --shape-sm:8px; --shape-md:12px; --shape-lg:16px; --shape-xl:28px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  /* -7/-8 not in payroll: added for price-checker --sp-xxl and barcode-print
     --space-xl, which are real, existing consumers. Payroll's own rule is
     "add a step when a consumer exists" -- one now does. */
  --space-7:40px; --space-8:48px;

  --state-hover:0.08; --state-press:0.12;
  /* barcode-print's third state-layer opacity (its -opacity-016 token). */
  --state-drag:0.16;

  /* The surface-container ladder is the primary depth signal; shadows only
     assist. Resting page elements paint NO shadow — elevation is reserved for
     things that float OVER content: modal, toast, row menu, sheet, menu. */
  --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);

  --font-family:'Inter','Roboto',sans-serif;
  --font-headline:'Manrope','Inter',sans-serif;

  --motion-base:200ms; --motion-ease:cubic-bezier(.4,0,.2,1);
  --ease-nav:cubic-bezier(.25,.8,.25,1);

  --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;

  --avatar-size:40px;
}
/* Reduced motion at the TOKEN level — all 18 consumers collapse for free. */
@media(prefers-reduced-motion:reduce){:root{--motion-base:0ms}}

/* ONE dark block. Not a @media pair plus a [data-theme] twin.
   Invariant: light --X-container and dark --on-X-container share the same hex
   for every role — both are MD3 tone 90. */
.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;
  --info:#7fd3f5; --info-container:#00394d; --on-info-container:#e5f5fc;
  --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;
  --chart-2:#f76707; --chart-5:#f59f00; --chart-9:#74b816; --chart-12:#37b24d;
}

/* Arabic is cursive — positive tracking breaks glyph joins, so the whole -ls
   table collapses to zero rather than maintaining a second per-role table. */
[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;
}