/*
 * zui-tokens.css — single source of truth for typography, spacing,
 * colour, sizes, radii, and shadows across the entire mantra-v4 surface.
 *
 * Loaded BEFORE zui-theme.css (CI4 admin) and BEFORE buttons.css (PWA).
 * Components reference these CSS variables — never inline a hex/px.
 *
 * Reference: CI4-migration/design-system/02-full-visual-audit.md
 * Aligned to the purchased Axelit template (template/axelit_codeigniter/).
 *
 * The PWA gets a copy of this file at v9-ci4/pwa/src/css/zui-tokens.css —
 * keep both in sync.
 */

:root {
  /* ── Typography scale ───────────────────────────────────────────
   * Use these everywhere; inline `font-size: 13px` is a bug.
   */
  --zui-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zui-text-xs:   12px;   /* metadata, badges, hints, table caption */
  --zui-text-sm:   14px;   /* body copy, form labels, table cells */
  --zui-text-base: 15px;   /* buttons, input values, sheet titles */
  --zui-text-lg:   16px;   /* h6, callouts */
  --zui-text-xl:   18px;   /* h5 */
  --zui-text-2xl:  20px;   /* h4 */
  --zui-text-3xl:  24px;   /* h3 — page title */
  --zui-text-4xl:  32px;   /* h2 */
  --zui-text-5xl:  40px;   /* h1 — used rarely */
  --zui-font-medium: 500;
  --zui-font-semibold: 600;
  --zui-font-bold: 700;
  --zui-line-snug: 1.3;
  --zui-line-base: 1.5;

  /* ── Spacing scale (4-based) ────────────────────────────────────
   * Use --zui-space-* in margin/padding/gap — never invent gap: 7px.
   */
  --zui-space-0:  0;
  --zui-space-1:  4px;
  --zui-space-2:  8px;
  --zui-space-3:  12px;
  --zui-space-4:  16px;
  --zui-space-5:  20px;
  --zui-space-6:  24px;
  --zui-space-8:  32px;
  --zui-space-10: 40px;
  --zui-space-12: 48px;
  --zui-space-16: 64px;

  /* ── Button sizes ───────────────────────────────────────────────
   * Three sizes only. Drop Axelit's xs/xl/xxl — real usage shows none.
   */
  --zui-btn-sm-h:   32px;
  --zui-btn-sm-px:  12px;
  --zui-btn-sm-fs:  12px;
  --zui-btn-h:      40px;   /* default */
  --zui-btn-px:     16px;
  --zui-btn-fs:     14px;
  --zui-btn-lg-h:   48px;
  --zui-btn-lg-px:  20px;
  --zui-btn-lg-fs:  16px;

  /* Icon-only buttons (square). */
  --zui-btn-icon-sm:  32px;
  --zui-btn-icon-md:  40px;
  --zui-btn-icon-lg:  48px;

  /* ── Form controls ──────────────────────────────────────────────
   * 44px = WCAG AAA touch target. Don't go smaller.
   */
  --zui-input-h:        44px;
  --zui-input-px:       12px;
  --zui-input-py:       10px;
  --zui-input-fs:       15px;
  --zui-input-label-fs: 14px;
  --zui-input-hint-fs:  12px;
  --zui-input-radius:   8px;
  --zui-focus-ring:     0 0 0 3px rgba(70, 90, 235, 0.18);

  /* ── Border radius ──────────────────────────────────────────────
   * Reserve large radii for decorative elements (cards, modals).
   * Use 8px for everything interactive (forms, buttons, list items).
   */
  --zui-radius-sm:   4px;
  --zui-radius:      8px;
  --zui-radius-md:   10px;
  --zui-radius-lg:   12px;
  --zui-radius-xl:   16px;
  --zui-radius-2xl:  20px;
  --zui-radius-pill: 999px;

  /* ── Borders ─────────────────────────────────────────────────── */
  --zui-border-hairline: 1px solid #e5e7eb;
  --zui-border-strong:   1px solid #cbd5e1;
  --zui-divider:         1px solid #f1f5f9;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --zui-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
  --zui-shadow:     0 2px 8px rgba(15, 23, 42, 0.08);
  --zui-shadow-md:  0 4px 16px rgba(15, 23, 42, 0.10);
  --zui-shadow-lg:  0 10px 25px rgba(15, 23, 42, 0.12);
  --zui-shadow-xl:  0 20px 40px rgba(15, 23, 42, 0.15);

  /* ── Colour palette (Axelit-aligned, RGB so opacity works) ──────
   * Use as: background: rgb(var(--primary)) or rgba(var(--primary), .5).
   * Hex equivalents in the comments — for sanity-checking only.
   */
  --primary:   70, 90, 235;     /* #465aeb */
  --secondary: 247, 196, 84;    /* #f7c454 */
  --success:   20, 120, 52;     /* #147834 */
  --danger:    220, 38, 38;     /* #dc2626 — Tailwind red-600 (UX preference over Axelit's magenta) */
  --warning:   234, 88, 12;     /* #ea580c — orange-600 */
  --info:      46, 94, 231;     /* #2e5ee7 */
  --accent:    255, 145, 77;    /* #ff914d — brand orange (Mantra-specific) */

  /* Neutral grays — Tailwind slate. */
  --gray-50:  248, 250, 252;
  --gray-100: 241, 245, 249;
  --gray-200: 226, 232, 240;
  --gray-300: 203, 213, 225;
  --gray-400: 148, 163, 184;
  --gray-500: 100, 116, 139;
  --gray-600: 71, 85, 105;
  --gray-700: 51, 65, 85;
  --gray-800: 30, 41, 59;
  --gray-900: 15, 23, 42;

  /* Surfaces — use these instead of hardcoded white/bg. */
  --zui-surface:        #ffffff;
  --zui-surface-muted:  #f8fafc;
  --zui-surface-sunken: #f1f5f9;
  --zui-text-strong:    #0f172a;
  --zui-text-body:      #1e293b;
  --zui-text-muted:     #475569;
  --zui-text-soft:      #64748b;

  /* ── Transitions ─────────────────────────────────────────────── */
  --zui-transition-fast: 120ms ease-out;
  --zui-transition:      180ms ease-out;
  --zui-transition-slow: 280ms ease-out;

  /* ── Z-index scale ────────────────────────────────────────────── */
  --zui-z-dropdown:  100;
  --zui-z-sticky:    200;
  --zui-z-fixed:     300;
  --zui-z-modal-bg:  900;
  --zui-z-modal:     950;
  --zui-z-popover:   1000;
  --zui-z-toast:     1100;
}

/* ── Dark mode overrides ──────────────────────────────────────────
 * Triggered by body.dark or html[data-zui-mode="dark"].
 */
body.dark,
html[data-zui-mode="dark"] {
  --zui-surface:        #1e293b;
  --zui-surface-muted:  #0f172a;
  --zui-surface-sunken: #020617;
  --zui-text-strong:    #f8fafc;
  --zui-text-body:      #e2e8f0;
  --zui-text-muted:     #94a3b8;
  --zui-text-soft:      #64748b;
  --zui-border-hairline: 1px solid #334155;
  --zui-border-strong:   1px solid #475569;
}