/* =====================================================================
   DGPro — design tokens (single source of truth).
   The DG Book Pro design system, adapted to DGPro: light, Stripe-style
   neutrals, DGPro services blue as the accent, Montserrat headings over
   Inter. See design-system/dgpro/MASTER.md.

   Loaded FIRST by every page (admin base.php, the portal layout, the auth
   screens), before app.css / theme.css / admin.css.

   What is configurable (Settings → Styling) arrives as an inline <style> on
   :root from the layout — accent (--accent*), chrome colours, fonts, radius,
   sizes — computed through core/Theme.php so a picked colour is always legible.
   Everything else here is fixed on purpose: the neutrals are what make the
   three DG apps read as one family.

   IMPORTANT: overrides must land on :root, not body. A custom property that
   references another (--color-primary: var(--accent-ink)) is resolved where it
   is DECLARED, so overriding --accent on body would not move --color-primary.
   ===================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/montserrat-var.woff2') format('woff2'); }

:root {
  /* Demongrafix platform */
  --navy: #29235C;
  --brand-mark: #29235C;

  /* Stripe neutrals (shared with DG Book Pro / DGBooking / DG Estate) */
  --bg: #F6F9FC;
  --bg-alt: #EEF1F6;
  --surface: #FFFFFF;
  --surface-2: #F9FBFD;
  --line: #E3E8EE;
  --line-soft: #EBEEF3;
  --line-strong: #D9DFE7;
  --ink: #0A2540;
  --ink-2: #425466;
  --ink-3: #697386;
  --ink-4: #8792A2;          /* placeholders and disabled only — below 4.5:1, never body text */
  --scrim: rgba(10, 37, 64, .4);

  /* Sidebar / chrome (bg colours are configurable; text follows) */
  --nav-bg: #FFFFFF;
  --nav-ink: #425466;
  --nav-ink-2: #697386;
  --nav-line: #E3E8EE;
  --nav-hover: #F6F9FC;
  --nav-active: color-mix(in oklab, var(--navy) 9%, var(--surface));
  --top-bg: color-mix(in oklab, var(--bg) 85%, transparent);

  /* Accent — DGPro services blue. Overridden from Settings → Styling via
     Theme::palette(): --accent for fills, --accent-ink for text and buttons. */
  --accent: #1D70B7;
  --accent-ink: #1D70B7;
  --accent-hover: #1A639F;
  --accent-wash: #E8F1F8;
  --accent-on: #FFFFFF;
  --focus: 0 0 0 3px color-mix(in oklab, var(--accent) 40%, transparent);

  /* Status — each pill is colour + icon + word */
  --st-pending: #B45309;
  --st-confirmed: #047857;
  --st-progress: #6D28D9;
  --st-completed: #1E40AF;
  --st-cancelled: #B91C1C;
  --st-noshow: #475569;
  --st-unassigned: #B45309;
  --danger: #B91C1C;
  --success: #047857;
  --warning: #B45309;
  --info: #1D70B7;

  /* Type */
  --font-head: "Montserrat", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --head-weight: 700;
  --head-track: -0.01em;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 26px;

  /* Space (4pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* Shape: radius and elevation by role */
  --r-input: 9px; --r-card: 12px; --r-sheet: 16px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(10, 37, 64, .05), 0 1px 3px rgba(50, 50, 93, .06);
  --shadow-hover: 0 4px 12px -2px rgba(50, 50, 93, .12), 0 2px 6px -2px rgba(10, 37, 64, .10);
  --shadow-pop: 0 18px 40px -12px rgba(50, 50, 93, .22), 0 4px 12px -2px rgba(50, 50, 93, .12);

  /* Layout */
  --sidebar-w: 252px;
  --z-top: 100; --z-menu: 200; --z-drawer: 300; --z-modal: 1000; --z-toast: 1100;
}

/* Headings follow the configurable heading font (Settings → Styling; layouts
   set --font-head). Tabular figures wherever numbers line up. */
.num, .tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}