/* ============================================================
   ZINVENT DESIGN SYSTEM — TOKENS
   Each product has a domain-rooted identity, not a color swap.
   Fonts loaded per-product in index.html.
   ============================================================ */

:root {
  /* Base scale */
  --z-ink: #101828;
  --z-ink-2: #344054;
  --z-muted: #667085;
  --z-line: #e4e7ec;
  --z-bg: #ffffff;
  --z-card: #ffffff;
  --z-surface: #f8fafc;

  /* Spacing */
  --z-s1: 4px; --z-s2: 8px; --z-s3: 12px; --z-s4: 16px;
  --z-s5: 24px; --z-s6: 32px; --z-s7: 48px; --z-s8: 64px; --z-s9: 96px;

  /* Radius */
  --z-r1: 6px; --z-r2: 10px; --z-r3: 14px; --z-r4: 20px; --z-r5: 28px;

  /* Shadow */
  --z-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --z-shadow-md: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --z-shadow-lg: 0 12px 24px -6px rgba(16,24,40,.14), 0 4px 8px -4px rgba(16,24,40,.08);
  --z-shadow-xl: 0 24px 48px -12px rgba(16,24,40,.22);

  /* Motion */
  --z-ease: cubic-bezier(.4,0,.2,1);
  --z-ease-out: cubic-bezier(.16,1,.3,1);
  --z-dur: .28s;
}

/* ============ INVOICEPH — fiduciary navy + ledger gold ============ */
[data-theme="invoiceph"] {
  --p-primary: #0f2c4c;
  --p-primary-600: #143a63;
  --p-primary-700: #0a1f38;
  --p-accent: #c89b3c;
  --p-accent-soft: #f6efdc;
  --p-ink: #0f1c2e;
  --p-muted: #48586b;
  --p-line: #dde4ec;
  --p-bg: #fbfcfe;
  --p-card: #ffffff;
  --p-surface: #f3f6fa;
  --p-font-head: "Spectral", Georgia, serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 8px;
  --p-motif: "ledger";
}

/* ============ TAXCALCPH — authority green + seal mint ============ */
[data-theme="taxcalcph"] {
  --p-primary: #0b3d2e;
  --p-primary-600: #0f4d3b;
  --p-primary-700: #072c21;
  --p-accent: #2f9e6e;
  --p-accent-soft: #e3f3ec;
  --p-ink: #0a1f17;
  --p-muted: #3e574c;
  --p-line: #d6e5dd;
  --p-bg: #f7faf8;
  --p-card: #ffffff;
  --p-surface: #eef5f1;
  --p-font-head: "Newsreader", Georgia, serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 6px;
  --p-motif: "seal";
}

/* ============ NEGOSYOSHEET — sari-sari terracotta + cream ============ */
[data-theme="negosyosheet"] {
  --p-primary: #b5462f;
  --p-primary-600: #c8543b;
  --p-primary-700: #923524;
  --p-accent: #e0922e;
  --p-accent-soft: #fbeede;
  --p-ink: #2a1812;
  --p-muted: #5f463c;
  --p-line: #ecd9cd;
  --p-bg: #fffaf4;
  --p-card: #ffffff;
  --p-surface: #fdf3e9;
  --p-font-head: "Fraunces", Georgia, serif;
  --p-font-body: "Nunito", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 16px;
  --p-motif: "shelf";
}

/* ============ TIPPOOLCALC — hospitality coral + teal ============ */
[data-theme="tippoolcalc"] {
  --p-primary: #d6452f;
  --p-primary-600: #e2543f;
  --p-primary-700: #b03522;
  --p-accent: #0f9b8e;
  --p-accent-soft: #def4f1;
  --p-ink: #2a1410;
  --p-muted: #5d453e;
  --p-line: #f0d9d3;
  --p-bg: #fff8f6;
  --p-card: #ffffff;
  --p-surface: #fdeee9;
  --p-font-head: "Poppins", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 14px;
  --p-motif: "share";
}

/* ============ PAYSLIPPH — HR blue + slate ============ */
[data-theme="payslipph"] {
  --p-primary: #1e40af;
  --p-primary-600: #264bc4;
  --p-primary-700: #15317f;
  --p-accent: #3b82f6;
  --p-accent-soft: #e6effe;
  --p-ink: #0f1b3d;
  --p-muted: #43527a;
  --p-line: #d9e0f0;
  --p-bg: #f6f8fd;
  --p-card: #ffffff;
  --p-surface: #eef2fb;
  --p-font-head: "Inter", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 8px;
  --p-motif: "docgrid";
}

/* ============ SELLERPRICE — marketplace electric orange ============ */
[data-theme="sellerprice"] {
  --p-primary: #ea580c;
  --p-primary-600: #f56a1f;
  --p-primary-700: #c24609;
  --p-accent: #f59e0b;
  --p-accent-soft: #fdeede;
  --p-ink: #2a1605;
  --p-muted: #6b5238;
  --p-line: #f3ddc7;
  --p-bg: #fffaf3;
  --p-card: #ffffff;
  --p-surface: #fdf2e4;
  --p-font-head: "Sora", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 12px;
  --p-motif: "tag";
}

/* ============ RENTSHEET — property emerald + sand ============ */
[data-theme="rentsheet"] {
  --p-primary: #065f46;
  --p-primary-600: #087a59;
  --p-primary-700: #044634;
  --p-accent: #b8893a;
  --p-accent-soft: #f3ead9;
  --p-ink: #0c211a;
  --p-muted: #566b61;
  --p-line: #d7e3dc;
  --p-bg: #f7faf8;
  --p-card: #ffffff;
  --p-surface: #eef4f1;
  --p-font-head: "Fraunces", Georgia, serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 10px;
  --p-motif: "key";
}

/* ============ MOVEINREPORT — forensic slate + evidence amber ============ */
[data-theme="moveinreport"] {
  --p-primary: #334155;
  --p-primary-600: #44566e;
  --p-primary-700: #1f2c3d;
  --p-accent: #d97706;
  --p-accent-soft: #fbeed7;
  --p-ink: #1a2433;
  --p-muted: #475569;
  --p-line: #e2e8f0;
  --p-bg: #fbfcfd;
  --p-card: #ffffff;
  --p-surface: #f1f5f9;
  --p-font-head: "Inter", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 8px;
  --p-motif: "checklist";
}

/* ============ PUMPROUTE — industrial steel + safety orange ============ */
[data-theme="pumproute"] {
  --p-primary: #475569;
  --p-primary-600: #5a6b80;
  --p-primary-700: #2f3c4d;
  --p-accent: #ea580c;
  --p-accent-soft: #fde6d8;
  --p-ink: #1c2530;
  --p-muted: #475569;
  --p-line: #dde3ea;
  --p-bg: #f8fafb;
  --p-card: #ffffff;
  --p-surface: #eef2f5;
  --p-font-head: "Archivo", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 6px;
  --p-motif: "route";
}

/* ============ RATECALCPH — freelancer indigo + amber ============ */
[data-theme="ratecalcph"] {
  --p-primary: #4338ca;
  --p-primary-600: #5646e0;
  --p-primary-700: #312a9e;
  --p-accent: #f59e0b;
  --p-accent-soft: #fdeecf;
  --p-ink: #16143a;
  --p-muted: #5b5786;
  --p-line: #ddd9f3;
  --p-bg: #f7f7fd;
  --p-card: #ffffff;
  --p-surface: #eeedfb;
  --p-font-head: "Sora", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 14px;
  --p-motif: "upward";
}

/* ============ TRADEJOURNALPH — terminal dark + gain green ============ */
[data-theme="tradejournalph"] {
  --p-primary: #059669;
  --p-primary-600: #047857;
  --p-primary-700: #036c4e;
  --p-accent: #10b981;
  --p-accent-soft: #d1fae5;
  --p-ink: #0b1220;
  --p-muted: #374151;
  --p-line: #d1d5db;
  --p-bg: #f4f7f9;
  --p-card: #ffffff;
  --p-surface: #f8fafb;
  --p-font-head: "Space Grotesk", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "JetBrains Mono", ui-monospace, monospace;
  --p-radius: 8px;
  --p-motif: "candle";
}

/* ============ UTANGPLANPH — calm teal + lavender ============ */
[data-theme="utangplanph"] {
  --p-primary: #0d9488;
  --p-primary-600: #12a99c;
  --p-primary-700: #0a7068;
  --p-accent: #8b5cf6;
  --p-accent-soft: #ede9fe;
  --p-ink: #0c2a27;
  --p-muted: #45605c;
  --p-line: #cfe9e5;
  --p-bg: #f5fbfa;
  --p-card: #ffffff;
  --p-surface: #eaf6f4;
  --p-font-head: "Fraunces", Georgia, serif;
  --p-font-body: "Nunito", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 18px;
  --p-motif: "path";
}

/* ============ COMMISSIONPH = sales crimson + gold ============ */
[data-theme="commissionph"] {
  --p-primary: #be123c;
  --p-primary-600: #d41e4c;
  --p-primary-700: #8f0e2d;
  --p-accent: #eab308;
  --p-accent-soft: #fcf3cf;
  --p-ink: #2a0a14;
  --p-muted: #693f51;
  --p-line: #f1d2dc;
  --p-bg: #fffafb;
  --p-card: #ffffff;
  --p-surface: #fdeef2;
  --p-font-head: "Sora", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 12px;
  --p-motif: "bars";
}

/* ============ FREELANCERKITPH — modular cyan + lime ============ */
[data-theme="freelancerkitph"] {
  --p-primary: #0891b2;
  --p-primary-600: #0ba6cc;
  --p-primary-700: #066c86;
  --p-accent: #84cc16;
  --p-accent-soft: #eff8dc;
  --p-ink: #06262e;
  --p-muted: #3d6069;
  --p-line: #cfe8ee;
  --p-bg: #f5fbfd;
  --p-card: #ffffff;
  --p-surface: #e8f5f9;
  --p-font-head: "Space Grotesk", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 12px;
  --p-motif: "grid";
}

/* ============ CLOSER — editorial ink + gold ============ */
[data-theme="closer"] {
  --p-primary: #1a1410;
  --p-primary-600: #2c231b;
  --p-primary-700: #0d0a07;
  --p-accent: #c8962a;
  --p-accent-soft: #f7efdc;
  --p-ink: #1a1410;
  --p-muted: #5d5347;
  --p-line: #e7ddcd;
  --p-bg: #faf6ef;
  --p-card: #ffffff;
  --p-surface: #f2e9d9;
  --p-font-head: "Fraunces", Georgia, serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 14px;
  --p-motif: "arrow";
}

/* ============ ZINVENT HUB — cohesive neutral ============ */
[data-theme="zinvent-hub"] {
  --p-primary: #101828;
  --p-primary-600: #1d2939;
  --p-primary-700: #0a0f1a;
  --p-accent: #3b82f6;
  --p-accent-soft: #e6effe;
  --p-ink: #101828;
  --p-muted: #667085;
  --p-line: #e4e7ec;
  --p-bg: #ffffff;
  --p-card: #ffffff;
  --p-surface: #f8fafc;
  --p-font-head: "Sora", system-ui, sans-serif;
  --p-font-body: "Inter", system-ui, sans-serif;
  --p-mono: "IBM Plex Mono", ui-monospace, monospace;
  --p-radius: 14px;
  --p-motif: "gallery";
}

/* ============ DARK MODE (per-product inheritance) ============ */
/* Dark mode removed by owner mandate: light mode forced for readability */