/* ============================================================================
 * Zentic design tokens — self-contained token layer for the back-office.
 * ----------------------------------------------------------------------------
 * The top-nav app pages load THIS file (via components/header.php) but NOT the
 * full zentic.css, so every token the bridge (zentic-override.css) consumes
 * must be defined here.
 * Brand colour (--zc-primary) is the DuoDirect system — deep navy chrome
 * (#0B1033 / #060A24) + gold #FFB81C accent + teal #14C8B8 secondary accent.
 * swiftly-theme.css sets the matching --brand-primary, which
 * zentic-override.css's --zc-accent prefers over --zc-primary; tenant
 * white-label colors still win via --brand-primary downstream of that.
 * Text on gold is ALWAYS navy (#0B1033), never white.
 * ==========================================================================*/
:root {
  /* Brand palette — DuoDirect navy / gold / teal */
  --zc-primary: #FFB81C;
  --zc-primary-dark: #E6A200;
  --zc-primary-light: #FFD66B;
  --zc-primary-xlight: #FFF4D6;
  --zc-primary-xxlight: rgba(255, 184, 28, 0.14);
  --zc-primary-middle: #FFC94D;
  --zc-on-primary: #0B1033;
  /* Brand colour AS TEXT: darkened so it clears 4.5:1 on white; flipped lighter on dark chrome (see zentic-override.css §DuoDirect) */
  --zc-primary-text: color-mix(in srgb, var(--zc-primary) 55%, #000);
  --zc-secondary: #0B1033;
  --zc-secondary-light: #DDE1F2;
  --zc-secondary-xlight: #F4F6FF;
  --zc-teal: #14C8B8;
  --zc-teal-dark: #0E9C90;

  /* Semantic colours (status colours are intentionally NOT brand colours) */
  --zc-success: #10B981;
  --zc-success-light: #D1FAE5;
  --zc-warning: #F59E0B;
  --zc-warning-light: #FEF3C7;
  --zc-danger: #EF4444;
  --zc-danger-light: #FEE2E2;
  --zc-info: #3B82F6;
  --zc-info-light: #DBEAFE;
  --zc-white: #FFFFFF;
  --zc-google: #4285F4;
  --zc-gpt: #10A37F;
  --zc-claude: #CC785c;
  --zc-cyan: #0891B2;
  --zc-pink: #EC4899;
  --zc-pink-dark: #BE185D;
  --zc-orange: #D97706;
  --zc-blue: #1D4ED8;

  /* Sidebar (kept for any shell that still references them) */
  --zc-sidebar-bg: #060A24;
  --zc-sidebar-bg-2: #141B4D;
  --zc-sidebar-hover: rgba(255, 184, 28, 0.14);
  --zc-sidebar-active-bg: #FFB81C;
  --zc-sidebar-active-border: #9A6C00;
  --zc-sidebar-text: #CCD1EE;
  --zc-sidebar-text-active: #0B1033;
  --zc-sidebar-text-muted: #9AA0CF;
  --zc-sidebar-section-color: #7F86B5;
  --zc-sidebar-border: rgba(255, 255, 255, 0.10);
  /* Unified sidebar palette — every sidebar (section rail, CRM, Account Settings,
     Agency, Domywork, Admin) reads these via zentic-override.css §15. */
  --zc-sb-bg: #060A24;
  --zc-sb-border: rgba(255, 255, 255, 0.10);
  --zc-sb-text: #CCD1EE;
  --zc-sb-text-strong: #FFFFFF;
  --zc-sb-label: #7F86B5;
  --zc-sb-icon: #9AA0CF;
  --zc-sb-icon-active: #FFD66B;
  --zc-sb-hover-bg: rgba(255, 184, 28, 0.14);
  --zc-sb-accent: #FFB81C;
  --zc-sb-disabled: rgba(204, 209, 238, 0.4);
  --zc-sidebar-width: 265px;
  --zc-sidebar-width-collapsed: 72px;

  /* Dark surfaces (for tooltips / inverse chips) */
  --zc-dark-surface: #0B1033;
  --zc-dark-surface-2: #141B4D;
  --zc-on-dark-text: #F9FAFB;
  --zc-on-dark-text-muted: rgba(255, 255, 255, 0.70);

  /* Layout */
  --zc-topbar-height: 64px;
  --zc-body-bg: #F4F6FF;
  --zc-card-bg: #FFFFFF;
  --zc-border-color: #DDE1F2;
  --zc-border-light: #EEF0FA;

  /* Text */
  --zc-text-primary: #0B1033;
  --zc-text-secondary: #5A6190;
  --zc-text-muted: #5A6190;

  /* Shadows */
  --zc-shadow-xs: 0 1px 2px rgba(11, 16, 51, 0.05);
  --zc-shadow-sm: 0 1px 3px rgba(11, 16, 51, 0.07), 0 1px 2px rgba(11, 16, 51, 0.05);
  --zc-shadow-md: 0 4px 6px rgba(11, 16, 51, 0.07), 0 2px 4px rgba(11, 16, 51, 0.05);
  --zc-shadow-lg: 0 10px 25px rgba(11, 16, 51, 0.07), 0 4px 10px rgba(11, 16, 51, 0.05);
  --zc-shadow-xl: 0 20px 40px rgba(11, 16, 51, 0.09);
  --zc-shadow-ai: 0 4px 20px rgba(255, 184, 28, 0.25);
  --zc-shadow-card: 0 0 20px rgba(11, 16, 51, 0.07);

  /* Border radii */
  --zc-radius-xs: 4px;
  --zc-radius-sm: 6px;
  --zc-radius-md: 8px;
  --zc-radius-lg: 10px;
  --zc-radius-xl: 10px;
  --zc-radius-2xl: 14px;
  --zc-radius-3xl: 18px;
  --zc-radius-pill: 60px;

  /* Typography — Hanken Grotesk (body/UI) + Bricolage Grotesque (headings, buttons, wordmark) */
  --zc-font-sans: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --zc-font-display: 'Bricolage Grotesque', 'Bahnschrift', 'Segoe UI', system-ui, sans-serif;
  --zc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --zc-fs-2xs: 10px;
  --zc-fs-xs: 12px;
  --zc-fs-sm: 13px;
  --zc-fs-base: 14px;
  --zc-fs-md: 15px;
  --zc-fs-lg: 16px;
  --zc-fs-xl: 18px;
  --zc-fs-2xl: 21px;
  --zc-fs-3xl: 26px;
  --zc-fs-4xl: 32px;
}