/* ============================================================
   THE ACTIVE PHARM — canonical design tokens (entity 2000)
   ------------------------------------------------------------
   Single source of truth for every Active Pharm CSS custom
   property, shared by BOTH sides of the tenant:
     - Customer shop/auth (active-pharm-shop.css, active-pharm-auth.css)
     - Admin reskin (entity-2000-admin.css and its two companion files)
   Loaded unconditionally in api/views/layouts.php <head>, before
   those four files, exactly like the admin reskin files already are —
   defining these at bare :root (not scoped to .ap-shell or
   [data-entity="2000"]) costs nothing on other tenants' pages (a
   handful of unused custom properties) and guarantees every Active
   Pharm surface, customer or admin, sees identical values. Values
   below were measured directly off the live theactivepharm.com site.
   ============================================================ */

:root {
	/* ---- Color ---- */
	--ap-ink: #0f172a;
	--ap-body: #334155;
	--ap-muted: #5b6b80; /* was #64748b: 4.18:1 on the cream page background, now 4.8:1 */
	--ap-faint: #94a3b8;
	--ap-border: #e2e8f0;
	--ap-border-strong: #cbd5e1;
	--ap-surface: #ffffff;
	--ap-surface-sunken: #f8fafc;
	/* Warm cream — the real site alternates white/cream/navy section
	   backgrounds. Used sparingly for alternating surfaces, not a
	   wholesale background replacement. */
	--ap-cream: #f6f5f1;
	--ap-navy-deep: #0f253e;
	/* Real brand navy/cyan flow through --sa-primary-color/--sa-secondary-color
	   (set dynamically per-entity in layouts.php from Entities.colorDark/
	   colorLight) — these are just the correct fallback defaults. */
	--ap-brand: var(--sa-primary-color, #21426b);
	--ap-brand-soft: color-mix(in srgb, var(--ap-brand) 8%, white);
	--ap-accent: var(--sa-secondary-color, #0cc3f7);
	/* Readable-text companions for the two brand colors. layouts.php computes them
	   per tenant (brandContrastCssVars) because a tenant's brand color can be pale or
	   near-black; the fallbacks below are exactly the values the shop used when it
	   hardcoded them, so a tenant that sets nothing renders unchanged.
	     --ap-on-brand / --ap-on-accent : text on a brand / accent FILL
	     --ap-brand-text                : the brand color used AS text on a surface
	     --ap-chrome / --ap-chrome-deep : brand as a white-text background (header,
	                                      hero panels) and its darker gradient end   */
	--ap-on-brand: var(--sa-on-primary, #fff);
	--ap-on-accent: var(--sa-on-secondary, #0f2942);
	--ap-brand-text: var(--sa-primary-text, var(--ap-brand));
	--ap-accent-text: var(--sa-secondary-text, var(--ap-accent));
	--ap-chrome: var(--sa-chrome-color, var(--ap-brand));
	--ap-chrome-deep: var(--sa-chrome-deep, var(--ap-navy-deep));
	/* Generic alias for the portal-wide stylesheets (tables, tabs, links, modals) that
	   color text with the brand color. */
	--sa-brand-text: var(--sa-primary-text, var(--sa-primary-color));
	--ap-success: #15803d;
	--ap-success-soft: #f0fdf4;
	--ap-warning: #b45309;
	--ap-warning-soft: #fffbeb;
	--ap-danger: #b91c1c;
	--ap-danger-soft: #fef2f2;
	/* Eyebrow labels are NOT always cyan on the real site — muted gray-navy
	   on white backgrounds, cyan only on dark/cream section backgrounds.
	   See .ap-eyebrow's --on-light modifier. */
	--ap-eyebrow-muted: #7a8b9e;

	/* ---- Radius ----
	   Follows the Liquid Glass scale (liquid-glass.css, 2026-11-02): 14px
	   cards and panels, 10px fields, capsule buttons and chips. Was the
	   near-sharp 2/4/8px scale measured off theactivepharm.com; the portal
	   now reads as an app, not a marketing page, so it uses the app scale. */
	--ap-radius: var(--ui-r-card, 14px);
	--ap-radius-md: var(--ui-r-field, 10px);
	--ap-radius-sm: var(--ui-r-field, 10px);
	--ap-radius-pill: 999px;

	/* ---- Spacing ----
	   -7/-8 added for section-level whitespace — the real site's marketing
	   sections breathe considerably more than typical in-app density; these
	   are for hero/section-header contexts, not form/table density.
	   2026-09-21: switched from rem to fixed px, tightened a step below the
	   original rem-equivalent values — these had been growing in lockstep
	   with the site-wide 117.5% root font-size bump (atlasmps-custom.css),
	   which is why cards/panels started looking oversized. Mirrors
	   --sa-space-* in atlasmps-custom.css exactly to stay "one family". */
	--ap-space-1: 4px;
	--ap-space-2: 8px;
	--ap-space-3: 10px;
	--ap-space-4: 14px;
	--ap-space-5: 20px;
	--ap-space-6: 27px;
	--ap-space-7: 40px;
	--ap-space-8: 54px;

	/* ---- Shadow ----
	   Content sits on hairlines with a barely-there shadow; depth is for the
	   floating layer only (Liquid Glass elevation tokens, navy-tinted). */
	--ap-shadow-sm: var(--ui-elev-1, 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03));
	--ap-shadow-md: var(--ui-elev-3, 0 2px 6px rgba(15, 23, 42, 0.06), 0 16px 40px -12px rgba(15, 37, 62, 0.30));

	/* ---- Typography ----
	   The real site pairs Inter (body/UI) with Cormorant Garamond (display
	   headlines) — used only on hero/section-header treatments, never on
	   dense data screens (tables, forms, lists stay on Inter for legibility).
	   Both fonts are already loaded globally in api/views/layouts.php —
	   nothing new to load. */
	--ap-font-body: var(--ui-font, -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif);
	--ap-font-display: 'Cormorant Garamond', Georgia, serif;
	--ap-eyebrow-tracking: 0.54px;
}

[data-theme-mode="dark"] {
	--ap-ink: #f1f5f9;
	--ap-body: #cbd5e1;
	--ap-muted: #94a3b8;
	--ap-faint: #64748b;
	--ap-border: #27303f;
	--ap-border-strong: #374151;
	--ap-surface: #161b26;
	--ap-surface-sunken: #10141d;
	--ap-cream: #1b2130;
	--ap-brand-soft: color-mix(in srgb, var(--ap-brand) 18%, #161b26);
	--ap-success-soft: rgba(21, 128, 61, 0.14);
	--ap-warning-soft: rgba(180, 83, 9, 0.16);
	--ap-warning: #f59e0b; /* #b45309 is 3:1 on the dark surfaces */
	--ap-danger-soft: rgba(185, 28, 28, 0.16);
}

/* Brand-as-text on a dark surface needs the lightened variant. */
[data-theme-mode="dark"] {
	--ap-brand-text: var(--sa-primary-text-dark, var(--ap-brand));
	--sa-brand-text: var(--sa-primary-text-dark, var(--sa-primary-color));
	--ap-accent-text: var(--sa-secondary-text-dark, var(--ap-accent));
}

/* ---- Portal text that has to stay readable whatever the tenant's colors ---- */
/* Bootstrap/theme utilities that paint text with the raw brand color. */
html[data-entity="2000"] .text-primary,
html[data-entity="2000"] .bg-primary-transparent {
	color: var(--sa-brand-text, var(--sa-primary-color)) !important;
}
html[data-entity="2000"] .text-info { color: #0b72a8 !important; }
html[data-entity="2000"] .text-warning,
html[data-entity="2000"] .bg-warning-transparent { color: #8a5a00 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .text-warning,
html[data-entity="2000"][data-theme-mode="dark"] .bg-warning-transparent { color: #fbbf24 !important; }
html[data-entity="2000"] .bulk-template-on.text-success,
html[data-entity="2000"] .bulk-staff-on { color: #09694e !important; }
html[data-entity="2000"] .bulk-template-off.text-danger,
html[data-entity="2000"] .bulk-staff-off { color: #c2331f !important; }
html[data-entity="2000"][data-theme-mode="dark"] .text-info { color: #5cc0f2 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .bulk-template-on.text-success,
html[data-entity="2000"][data-theme-mode="dark"] .bulk-staff-on { color: #34d399 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .bulk-template-off.text-danger,
html[data-entity="2000"][data-theme-mode="dark"] .bulk-staff-off { color: #f87171 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .text-muted,
html[data-entity="2000"][data-theme-mode="dark"] .form-text { color: #a3adbb !important; }
/* A filled pill's label: the dark-mode link rule in atlasmps-custom.css out-specifies .ap-filter-pill.is-active. */
html[data-theme-mode="dark"] a.ap-filter-pill.is-active { color: var(--ap-on-brand) !important; }
html[data-entity="2000"][data-theme-mode="dark"] .bg-primary-transparent {
	color: color-mix(in srgb, var(--sa-brand-text, var(--sa-primary-color)) 75%, #fff) !important;
}

/* ---- Admin-side status colors that were written inline / as fixed theme utilities ---- */
html[data-entity="2000"] .badge.bg-success-transparent.text-success { color: #09694e !important; }
html[data-entity="2000"][data-theme-mode="dark"] .badge.bg-success-transparent.text-success { color: #34d399 !important; }
html[data-entity="2000"] .btn-outline-info { color: #0b72a8; border-color: #0b72a8; }
html[data-entity="2000"][data-theme-mode="dark"] .btn-outline-info { color: #5cc0f2; border-color: #5cc0f2; }
/* Dashboard / analytics mini-stat captions carry their accent as an inline color; nudge them to AA. */
html[data-entity="2000"] .sa-mini-stat__desc[style*="#ec4899"] { color: #a3195b !important; opacity: 1 !important; }
html[data-entity="2000"] .sa-mini-stat__desc[style*="#5F7058"] { color: #3f4f38 !important; opacity: 1 !important; }
html[data-entity="2000"] .sa-mini-stat__desc[style*="#A87825"] { color: #7a5617 !important; opacity: 1 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .sa-mini-stat__desc[style*="#ec4899"] { color: #f472b6 !important; opacity: 1 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .sa-mini-stat__desc[style*="#5F7058"] { color: #a3b899 !important; opacity: 1 !important; }
html[data-entity="2000"][data-theme-mode="dark"] .sa-mini-stat__desc[style*="#A87825"] { color: #fbbf24 !important; opacity: 1 !important; }
html[data-entity="2000"] .badge[style*="#A87825"] { color: #7a5617 !important; }
html[data-entity="2000"] .actlog-row__badge--module { background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)) !important; }
html[data-entity="2000"][data-theme-mode="dark"] .btn-outline-primary {
	color: var(--sa-brand-text, #8fb0d8);
	border-color: var(--sa-brand-text, #8fb0d8);
}
:root[data-entity="2000"][data-theme-mode="dark"] .btn.btn-outline-primary {
	color: var(--sa-brand-text, #8fb0d8) !important;
	border-color: var(--sa-brand-text, #8fb0d8) !important;
}