/* BharatApps.store — platform design tokens: Cityo, MBM, Shiftly.

   SOURCE OF TRUTH
     Cityo   locallense lib/theme/tokens.dart (C, R, S, Shadows, Motion),
             lib/theme/typography.dart, lib/theme/app_theme.dart,
             lib/features/live_cityo/widgets/live_ui.dart (LivePalette).
             Identical on fix/orders-canonical, ui/production, cityo/addresses-private.
     MBM     mbm design/mbm-prototype.html :root and lib/ui2/theme/tokens.dart
             (already in site/assets/css/site.css; repeated here as --mbm-*).
     Shiftly employee lib/theme/shiftly_colors.dart (branch staff-link-server).

   HOW TO USE
     1. Load after site.css:  <link rel="stylesheet" href="/assets/cityo/tokens.css">
     2. Put the platform on <html>:  data-platform="cityo" | "mbm" | "shiftly".
        site/_build/build.py and routers/share_preview_router.py choose it.
     3. Component CSS uses the site's semantic names (--paper, --card, --ink,
        --line, --indigo…). The [data-platform] blocks below re-point those names
        at the platform's own palette, so every existing component (header,
        footer, buttons, search box) re-themes without a second stylesheet.
        Cityo-only components (assets/cityo/cityo.css) use the --cy-* names.

   INVARIANTS — never themed, never overridden by a platform block
     --money-in  #0E6B55  credit, money IN  (MBM C.credit)
     --money-out #93401C  debit, money OUT  (MBM C.debit)
     Note: Cityo's brand jade is the same hex as money-in. On Cityo pages jade
     is the brand accent only; prices are set in --ink, never in jade, so a
     price never reads as "money received". See docs/CITYO_WEB_DESIGN.md.

   ACCESSIBILITY ADJUSTMENTS (web only, documented, app values kept as --cy-*-app)
     ink2 #6E7671 on paper #F4F5F3 is 4.3:1 (below WCAG AA for body text). The
     web text colour --cy-ink2 is #636B66 (4.9:1), the value site.css already
     uses. ink3 is decoration and placeholder only, never body text. */

:root{
  /* ── invariants ───────────────────────────────────────────── */
  --money-in:#0E6B55;
  --money-out:#93401C;

  /* ── Cityo, light (C.*) ───────────────────────────────────── */
  --cy-paper:#F4F5F3;          /* C.paper   app background */
  --cy-card:#FFFFFF;           /* C.card */
  --cy-surface:#F1F5F9;        /* LivePalette.surface (light): chips, avatars */
  --cy-ink:#161A18;            /* C.ink     primary text */
  --cy-ink2-app:#6E7671;       /* C.ink2    as in the app */
  --cy-ink2:#636B66;           /* C.ink2    web text value, AA on paper */
  --cy-ink3:#9BA29D;           /* C.ink3    hints, decoration only */
  --cy-line:#E5E7E2;           /* C.line */
  --cy-dashed:#D9DDD8;         /* C.dashedLine  "parchi" border */
  --cy-jade:#0E6B55;           /* C.jade    primary accent */
  --cy-jade-soft:#E6F0EC;      /* C.jadeSoft */
  --cy-jade-border:#CFE4DB;    /* C.jadeBorder */
  --cy-jade-ink:#0E6B55;       /* accent used as text / links */
  --cy-jade-dark:#053B31;      /* C.jadeDark  gradient bottom */
  --cy-jade-mid:#0B6B57;       /* C.jadeMid   launcher, adaptive icon */
  --cy-jade-light:#12A87E;     /* C.jadeLight dark-theme primary */
  --cy-jade-muted:#4A7D6D;     /* C.jadeMuted search icon */
  --cy-mint:#5FD6B0;           /* C.mint */
  --cy-scan-mint:#2FE0A8;      /* C.scanMint */
  --cy-signal:#B4491F;         /* C.signal  urgency only (closing soon) and errors */
  --cy-signal-soft:#FBEDE6;    /* C.signalSoft */
  --cy-signal-border:#F5C2BC;  /* C.signalBorder */
  --cy-amber:#E8A33D;          /* C.amber   review stars */
  --cy-star-bg:#D9DDD8;        /* C.starBg  unlit star */
  --cy-whatsapp:#25D366;       /* C.whatsapp */
  --cy-far-bg:#FFF6F2; --cy-far-border:#F0DCD3; --cy-far-ink:#8A5A44;
  --cy-shimmer:#EAECE8;        /* C.shimmerBase */
  --cy-shimmer-hi:#F7F8F6;     /* C.shimmerHighlight */
  --cy-scrim:rgba(10,16,14,.42);       /* C.scrim       sheet backdrop */
  --cy-scrim-light:rgba(22,26,24,.22); /* C.scrimLight  grab handle */
  --cy-dark-bg:#04100D;        /* C.darkBg  scanner */
  /* C.jadeGradient: #2FE0A8 -> #12A87E -> #0B6B57, stops 0/.42/1, 155deg */
  --cy-gradient:linear-gradient(155deg,#2FE0A8 0%,#12A87E 42%,#0B6B57 100%);
  /* splash: #12A87E -> #0B6B57 -> #04302A, stops 0/.48/1 */
  --cy-gradient-splash:linear-gradient(160deg,#12A87E 0%,#0B6B57 48%,#04302A 100%);

  /* ── Cityo radii (R.*) ────────────────────────────────────── */
  --cy-r-sheet:28px; --cy-r-lg:26px; --cy-r-avatar:22px; --cy-r-stamp:20px; --cy-r-md:18px;
  --cy-r-tile:16px; --cy-r-button:14px; --cy-r-sm:12px; --cy-r-card-sm:10px; --cy-r-icon:9px;
  --cy-r-xs:8px; --cy-r-dot:4px; --cy-r-bar:3px; --cy-r-pill:100px;

  /* ── Cityo spacing (S.*) ──────────────────────────────────── */
  --cy-pad:22px;               /* S.pad     screen gutter (phone) */
  --cy-gap:12px;               /* S.gap     between cards */
  --cy-section:34px;           /* S.section above a section heading */
  --cy-tap:44px;               /* S.minTapTarget */

  /* ── Cityo shadows (Shadows.*) ────────────────────────────── */
  --cy-sh1:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.05);
  --cy-sh2:0 2px 6px rgba(22,26,24,.06),0 14px 34px rgba(22,26,24,.10);
  --cy-sh-slip:0 1px 1px rgba(22,26,24,.05),0 10px 30px rgba(22,26,24,.13);
  --cy-sh-fab:0 6px 16px rgba(11,107,87,.38),0 16px 40px rgba(11,107,87,.28);
  --cy-sh-nav:0 8px 30px rgba(22,26,24,.13);
  --cy-sh-btn:0 3px 10px rgba(14,107,85,.25);  /* CityoButton.primary */

  /* ── Cityo motion (Motion.*) ──────────────────────────────── */
  --cy-ease:cubic-bezier(.22,1,.36,1);
  --cy-dur:340ms; --cy-dur-tap:200ms; --cy-dur-sheet:420ms;

  /* ── Cityo type (typography.dart; fonts bundled in site/assets/fonts) ── */
  --cy-disp:"Bricolage Grotesque","Bricolage Fallback","Segoe UI",system-ui,sans-serif;
  --cy-body:"Instrument Sans","Instrument Fallback","Helvetica Neue",Arial,sans-serif;
  --cy-mono:"Martian Mono","Martian Fallback",ui-monospace,Menlo,monospace;
  /* style: weight size/line-height family — app size in px, web uses rem (16px base) */
  --cy-t-screen:700 1.9375rem/1.1 var(--cy-disp);        /* screenTitle  31 w700 -0.8 */
  --cy-t-section:600 1.0625rem/1.25 var(--cy-disp);      /* sectionHeading 17 w600 -0.25 */
  --cy-t-card:600 .96875rem/1.2 var(--cy-disp);          /* cardTitle 15.5 w600 -0.2 */
  --cy-t-answer:600 1.1875rem/1.3 var(--cy-disp);        /* parchiAnswer 19 w600 */
  --cy-t-body:400 .875rem/1.5 var(--cy-body);            /* body 14 */
  --cy-t-body-m:500 .875rem/1.45 var(--cy-body);         /* bodyMedium 14 w500 */
  --cy-t-secondary:400 .78125rem/1.4 var(--cy-body);     /* secondary 12.5 */
  --cy-t-button:600 .78125rem/1 var(--cy-body);          /* button 12.5 w600 */
  --cy-t-mini:600 .84375rem/1.25 var(--cy-body);         /* miniTitle 13.5 */
  --cy-t-mini-sub:400 .71875rem/1.35 var(--cy-body);     /* miniSubtitle 11.5 */
  --cy-t-eyebrow:500 .59375rem/1.3 var(--cy-mono);       /* eyebrow 9.5, uppercase, .16em */
  --cy-t-receipt:400 .65625rem/2.1 var(--cy-mono);       /* receiptLine 10.5 */

  /* ── MBM (as site.css) ────────────────────────────────────── */
  --mbm-paper:#F4F5F3; --mbm-card:#FFFFFF; --mbm-sunk:#ECEEE9; --mbm-ink:#161A18; --mbm-ink2:#636B66;
  --mbm-line:#E5E7E2; --mbm-indigo:#3A4C9E; --mbm-indigo-deep:#232E66; --mbm-indigo-soft:#EAECF7;
  --mbm-indigo-line:#DDE1F2;

  /* ── Shiftly (shiftly_colors.dart) ────────────────────────── */
  --sh-blue:#2563EB; --sh-blue-dark:#1E4FC6; --sh-success:#22C55E; --sh-warning:#F59E0B; --sh-danger:#EF4444;
  --sh-paper:#F6F7FB; --sh-paper-dark:#111318; --sh-card:#FFFFFF; --sh-card-dark:#1C1E22;
  --sh-ink:#1B1C1F; --sh-ink-dark:#FFFFFF; --sh-ink2:#6B7280; --sh-ink2-dark:#A1A1AA;
}

/* ── Cityo, dark (C.dark*, LivePalette dark) ──────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --cy-paper:#0B0F19; --cy-card:#161E2E; --cy-surface:#1E293B;
    --cy-ink:#F8FAFC; --cy-ink2-app:#94A3B8; --cy-ink2:#94A3B8; --cy-ink3:#64748B;
    --cy-line:#253347; --cy-dashed:#253347;
    --cy-jade:#12A87E; --cy-jade-soft:#064E3B; --cy-jade-border:#0B5B48; --cy-jade-ink:#5FD6B0;
    --cy-signal-soft:#3B1C10; --cy-signal-border:#5A2A18; --cy-star-bg:#334155;
    --cy-shimmer:#1E293B; --cy-shimmer-hi:#253347; --cy-scrim:rgba(0,0,0,.6);
    --cy-sh1:none; --cy-sh2:0 2px 6px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.45);
    --cy-sh-slip:0 10px 30px rgba(0,0,0,.5); --cy-sh-btn:0 3px 10px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --cy-paper:#0B0F19; --cy-card:#161E2E; --cy-surface:#1E293B;
  --cy-ink:#F8FAFC; --cy-ink2-app:#94A3B8; --cy-ink2:#94A3B8; --cy-ink3:#64748B;
  --cy-line:#253347; --cy-dashed:#253347;
  --cy-jade:#12A87E; --cy-jade-soft:#064E3B; --cy-jade-border:#0B5B48; --cy-jade-ink:#5FD6B0;
  --cy-signal-soft:#3B1C10; --cy-signal-border:#5A2A18; --cy-star-bg:#334155;
  --cy-shimmer:#1E293B; --cy-shimmer-hi:#253347; --cy-scrim:rgba(0,0,0,.6);
  --cy-sh1:none; --cy-sh2:0 2px 6px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.45);
  --cy-sh-slip:0 10px 30px rgba(0,0,0,.5); --cy-sh-btn:0 3px 10px rgba(0,0,0,.35);
}

/* ═══ Platform switch: re-point site.css semantic tokens ═══════════
   Specificity: these selectors beat site.css's :root and its dark block,
   and this file loads after site.css. --credit/--debit are never touched. */

/* Cityo */
:root[data-platform="cityo"]{
  --paper:var(--cy-paper); --card:var(--cy-card); --sunk:var(--cy-surface);
  --ink:var(--cy-ink); --ink2:var(--cy-ink2); --ink3:var(--cy-ink3);
  --line:var(--cy-line); --hair:var(--cy-line);
  --indigo:var(--cy-jade); --indigo-deep:var(--cy-jade-dark); --indigo-soft:var(--cy-jade-soft);
  --indigo-line:var(--cy-jade-border); --indigo-ink:var(--cy-jade-ink);
  --signal:var(--cy-signal); --signal-soft:var(--cy-signal-soft);
  --acc:var(--cy-jade); --acci:var(--cy-jade-ink);
  --sh1:var(--cy-sh1); --sh2:var(--cy-sh2);
  --r16:var(--cy-r-tile); --r22:var(--cy-r-md); --r11:var(--cy-r-sm);
  --ease:var(--cy-ease);
}
@media (prefers-color-scheme:dark){
  :root[data-platform="cityo"]:not([data-theme="light"]){
    --paper:var(--cy-paper); --card:var(--cy-card); --sunk:var(--cy-surface);
    --ink:var(--cy-ink); --ink2:var(--cy-ink2); --ink3:var(--cy-ink3);
    --line:var(--cy-line); --hair:var(--cy-line);
    --indigo:var(--cy-jade); --indigo-soft:var(--cy-jade-soft); --indigo-line:var(--cy-jade-border);
    --indigo-ink:var(--cy-jade-ink); --pi-cityo:var(--cy-jade-ink);
    --sh1:var(--cy-sh1); --sh2:var(--cy-sh2);
  }
}
:root[data-platform="cityo"][data-theme="dark"]{
  --paper:var(--cy-paper); --card:var(--cy-card); --sunk:var(--cy-surface);
  --ink:var(--cy-ink); --ink2:var(--cy-ink2); --ink3:var(--cy-ink3);
  --line:var(--cy-line); --hair:var(--cy-line);
  --indigo:var(--cy-jade); --indigo-soft:var(--cy-jade-soft); --indigo-line:var(--cy-jade-border);
  --indigo-ink:var(--cy-jade-ink); --pi-cityo:var(--cy-jade-ink);
  --sh1:var(--cy-sh1); --sh2:var(--cy-sh2);
}

/* MBM: site.css defaults are MBM already; the attribute is explicit only. */
:root[data-platform="mbm"]{--acc:var(--p-mbm);--acci:var(--pi-mbm)}

/* Shiftly */
:root[data-platform="shiftly"]{
  --paper:var(--sh-paper); --card:var(--sh-card); --sunk:#ECEEF5;
  --ink:var(--sh-ink); --ink2:var(--sh-ink2);
  --line:#E3E6EE; --hair:#ECEEF5;
  --indigo:var(--sh-blue); --indigo-deep:var(--sh-blue-dark); --indigo-soft:#E8EFFD;
  --indigo-line:#CFDDFB; --indigo-ink:var(--sh-blue-dark);
  --acc:var(--sh-blue); --acci:var(--sh-blue-dark);
}
@media (prefers-color-scheme:dark){
  :root[data-platform="shiftly"]:not([data-theme="light"]){
    --paper:var(--sh-paper-dark); --card:var(--sh-card-dark); --sunk:#16181D;
    --ink:var(--sh-ink-dark); --ink2:var(--sh-ink2-dark); --line:#2A2D33; --hair:#22252A;
    --indigo:var(--sh-blue); --indigo-soft:#1A2A52; --indigo-line:#22386B; --indigo-ink:#8DB0FF;
    --acci:#8DB0FF;
  }
}
:root[data-platform="shiftly"][data-theme="dark"]{
  --paper:var(--sh-paper-dark); --card:var(--sh-card-dark); --sunk:#16181D;
  --ink:var(--sh-ink-dark); --ink2:var(--sh-ink2-dark); --line:#2A2D33; --hair:#22252A;
  --indigo:var(--sh-blue); --indigo-soft:#1A2A52; --indigo-line:#22386B; --indigo-ink:#8DB0FF;
  --acci:#8DB0FF;
}

/* ═══ Mitra and the "Ask Mitra" chat keep their look on every platform ═══
   (owner rule). The guide defines its own colours inside its shadow root;
   the chat panel and launcher inherit --paper/--card/--ink/--indigo… from
   the page, so they are pinned here to the site's original (MBM) values. */
:root[data-platform] #chat-root,:root[data-platform] #chat-launcher{
  --paper:#F4F5F3; --card:#FFFFFF; --sunk:#ECEEE9; --ink:#161A18; --ink2:#636B66; --ink3:#838B85;
  --line:#E5E7E2; --hair:#EFF1ED; --indigo:#3A4C9E; --indigo-deep:#232E66; --indigo-soft:#EAECF7;
  --indigo-line:#DDE1F2; --indigo-ink:#3A4C9E;
  --sh1:0 1px 2px rgba(22,26,24,.05),0 4px 14px rgba(22,26,24,.05);
  --sh2:0 2px 6px rgba(22,26,24,.06),0 14px 34px rgba(22,26,24,.10);
  --r11:11px; --r16:16px; --r22:22px; --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root[data-platform]:not([data-theme="light"]) #chat-root,:root[data-platform]:not([data-theme="light"]) #chat-launcher{
    --paper:#15181A; --card:#1D2123; --sunk:#101214; --ink:#F4F5F3; --ink2:#9AA39E; --ink3:#838B85;
    --line:#2C3134; --hair:#23282B; --indigo:#5C6EC5; --indigo-soft:#232E66; --indigo-line:#2F3C80; --indigo-ink:#8FA0FF;
    --sh1:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.2); --sh2:0 2px 6px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.4);
  }
}
:root[data-platform][data-theme="dark"] #chat-root,:root[data-platform][data-theme="dark"] #chat-launcher{
  --paper:#15181A; --card:#1D2123; --sunk:#101214; --ink:#F4F5F3; --ink2:#9AA39E; --ink3:#838B85;
  --line:#2C3134; --hair:#23282B; --indigo:#5C6EC5; --indigo-soft:#232E66; --indigo-line:#2F3C80; --indigo-ink:#8FA0FF;
  --sh1:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.2); --sh2:0 2px 6px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.4);
}