/* THIS FILE IS GENERATED by build.mjs. Do not edit. Edit tokens/*.json and run `npm run build`. */
/* ============================================================================
 * @eq-solutions/tokens v1.3 — canonical EQ Solutions design tokens
 *
 * Single source of truth for colour, type, spacing, radii, shadow, motion.
 * Base layer applies on :root. Per-tier deltas apply under [data-tier="..."].
 * Shell sets data-tier on root from the tenant's JWT tier claim.
 * ========================================================================== */

:root {

  /* ── BRAND COLOURS — use these and nothing else for brand surfaces ─────────────────────────────────── */
  --eq-sky: #3DA8D8; /* primary: logo, headings, CTAs, icon fills */
  --eq-deep: #2986B4; /* hover for anything blue; secondary headings */
  --eq-ice: #EAF5FB; /* page / card tint; table header alt fill */
  --eq-ink: #1A1A2E; /* body text, dark sidebar - never pure black */
  --eq-grey: #666666; /* secondary text, labels, metadata */
  --eq-white: #FFFFFF; /* text on blue/ink surfaces */
  --eq-sky-deep: var(--eq-deep); /* alias of deep — used by Shell/Field */
  --eq-amber: #F59E0B; /* brand amber — attention emphasis (pair with status semantics, never as success/error) */
  --eq-amber-deep: #B45309; /* amber hover / deeper amber */
  --eq-slate: #94A3B8; /* muted text / faint metadata on light surfaces */
  --eq-live: #38BDF8; /* live / sync indicator (the LIVE dot) */

  /* ── ACCENT — secondary warmth (clay). Brand decoration only (~5%), never status. ─────────────────────────────────── */
  --eq-clay: #A8572B; /* Direction D secondary warmth accent - eyebrows / section accents, ~5%, brand only, never status */
  --eq-clay-deep: #8A4521; /* clay hover */
  --eq-clay-bg: #FBF1E9; /* clay tint surface */

  /* ── NEUTRAL SCALE — Direction D warm-sand surfaces; text greys (400-600) stay neutral ─────────────────────────────────── */
  --eq-gray-50: #F6F3EE; /* Direction D warm-sand surface */
  --eq-gray-100: #EFEAE1; /* Direction D warm-sand */
  --eq-gray-200: #E4DDD2; /* default border on cards, inputs, table rows (Direction D warm-sand) */
  --eq-gray-300: #D4CCBE; /* default input border (Direction D warm-sand) */
  --eq-gray-400: #9CA3AF; /* text grey - stays neutral (Direction D warms surfaces only) */
  --eq-gray-500: #6B7280;
  --eq-gray-600: #4B5563;

  /* ── STATUS COLOURS — pass / fail / attention only, never as brand ─────────────────────────────────── */
  --eq-success-bg: #F0FDF4;
  --eq-success-text: #15803D;
  --eq-warning-bg: #FFFBEB;
  --eq-warning-text: #B45309;
  --eq-error-bg: #FEF2F2;
  --eq-error-text: #B91C1C;

  /* ── TIER — per-tenant accent. Defaults to brand.sky; Enterprise overrides. ─────────────────────────────────── */
  --eq-tier-accent: var(--eq-sky); /* Tenant-customisable accent. Defaults to brand.sky. Enterprise tier overrides to a tenant-set value (or a deeper teal as fallback). Apps should reference tier.accent for highlights that are allowed to vary per tenant; reference color.brand.sky directly only for the canonical EQ identity (logo, primary CTA). */

  /* ── TYPE — font stack, scale, weights, body, tracking, label ─────────────────────────────────── */
  --eq-font-stack: 'Plus Jakarta Sans', 'Aptos Display', 'Aptos', Arial, sans-serif; /* Host app loads Plus Jakarta Sans and exposes it as --font-jakarta. This package never loads fonts. */
  --eq-text-xs: 11px;
  --eq-text-sm: 12px;
  --eq-text-base: 14px;
  --eq-text-md: 15px;
  --eq-text-lg: 18px;
  --eq-text-xl: 22px;
  --eq-text-2xl: 28px;
  --eq-text-3xl: 36px;
  --eq-text-4xl: 48px;
  --eq-weight-regular: 400;
  --eq-weight-medium: 500;
  --eq-weight-semi: 600;
  --eq-weight-bold: 700;
  --eq-weight-black: 800;
  --eq-body-line-height: 1.5;
  --eq-body-weight: 400;
  --eq-tracking-tight: -0.01em;
  --eq-tracking-tighter: -0.02em;
  --eq-tracking-label: 0.06em;
  --eq-label-size: 12px;
  --eq-label-weight: 600;

  /* ── SPACING — 8-pixel grid, with 4 as the half-step ─────────────────────────────────── */
  --eq-space-1: 4px; /* half-step */
  --eq-space-2: 8px; /* 8px grid base unit */
  --eq-space-3: 12px;
  --eq-space-4: 16px;
  --eq-space-5: 20px;
  --eq-space-6: 24px;
  --eq-space-8: 32px;
  --eq-space-10: 40px;
  --eq-space-12: 48px;
  --eq-space-16: 64px;
  --eq-content-max-width: 1200px;

  /* ── RADII — semantic, not numeric ─────────────────────────────────── */
  --eq-radius-chip: 4px; /* tags, small pill chips */
  --eq-radius-input: 6px; /* buttons, inputs */
  --eq-radius-card: 8px; /* standard cards */
  --eq-radius-shell: 12px; /* large shell cards (Service) */
  --eq-radius-pill: 9999px; /* badges, avatars */

  /* ── BORDERS — single canonical hairline; coloured accents are forbidden ─────────────────────────────────── */
  --eq-border-width: 1px;
  --eq-border-color: var(--eq-gray-200); /* default border on cards, inputs, table rows */
  --eq-input-border-color: var(--eq-gray-300); /* default input border */

  /* ── SHADOWS / OVERLAY — floating UI only. Static cards sit flat with a 1px border. ─────────────────────────────────── */
  --eq-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); /* floating UI only - static cards sit flat with a 1px border */
  --eq-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15); /* modals, drawers, large floating surfaces */
  --eq-shadow-elevated: var(--eq-shadow-lg); /* premium surfaces - Standard/Advanced inherit lg; Enterprise overrides this with a richer treatment */
  --eq-overlay: rgba(26, 26, 46, 0.45); /* modal / drawer backdrop — --eq-ink at 45% opacity */

  /* ── MOTION — 150ms default. No bounce. ─────────────────────────────────── */
  --eq-duration-default: 150ms; /* default transition - colour, border, opacity */
  --eq-duration-drawer: 300ms; /* sidebar drawer slide */
  --eq-duration-spinner: 700ms; /* loading spinner full revolution */
  --eq-ease: cubic-bezier(0.4, 0, 0.2, 1); /* no bounce. Motion is colour / border swap, not translate, except for the sidebar drawer. */

  /* ── FOCUS RING — required on every focusable input ─────────────────────────────────── */
  --eq-focus-ring: 0 0 0 2px rgba(61, 168, 216, 0.40); /* required on every focusable input. Pair with outline-offset: 2px on focus-visible. */
  --eq-focus-offset: 2px;

  /* ── DENSITY — compact mode values; applied under [data-density="compact"] ─────────────────────────────────── */
  --eq-density-compact-row-pad: 8px; /* Table/list row padding — compact mode */
  --eq-density-compact-cell-pad: 6px 12px; /* Table cell padding — compact mode */
  --eq-density-compact-card-pad: 12px; /* Card body padding — compact mode */
  --eq-density-compact-font-size: var(--eq-text-sm); /* Body font in compact */
}

[data-tier="standard"] {
  /* standard inherits the base layer. */
}

[data-tier="advanced"] {
  /* advanced inherits the base layer. */
}

[data-tier="enterprise"] {
  --eq-tier-accent: #1A5E8A; /* Enterprise default accent - deeper teal than brand.sky. Tenants on white-label plans may override at runtime via CSS variable injection on the data-tier element. */
  --eq-shadow-elevated: 0 14px 48px rgba(26, 26, 46, 0.18), 0 2px 6px rgba(26, 26, 46, 0.08); /* Enterprise floating-surface shadow - deeper, slightly cooler-tinted via ink-channel rgb. */
}

/* ============================================================================
 * COMPACT DENSITY — apply data-density="compact" on document.body or a
 * container to tighten table rows, cards, and body font on data-heavy surfaces.
 * ========================================================================== */
[data-density="compact"] {
  --eq-space-4: 8px;
  --eq-space-3: 6px;
  --eq-radius-card: var(--eq-radius-chip);
}

/* ============================================================================
 * TAILWIND v4 @theme — exposes the tokens above as utility classes.
 * Drop this block when consuming from a non-Tailwind app (no-op outside Tailwind).
 * ========================================================================== */
@theme inline {
  --color-eq-sky: var(--eq-sky);
  --color-eq-deep: var(--eq-deep);
  --color-eq-ice: var(--eq-ice);
  --color-eq-ink: var(--eq-ink);
  --color-eq-grey: var(--eq-grey);
  --color-eq-white: var(--eq-white);
  --color-eq-sky-deep: var(--eq-sky-deep);
  --color-eq-amber: var(--eq-amber);
  --color-eq-amber-deep: var(--eq-amber-deep);
  --color-eq-slate: var(--eq-slate);
  --color-eq-live: var(--eq-live);
  --color-eq-clay: var(--eq-clay);
  --color-eq-clay-deep: var(--eq-clay-deep);
  --color-eq-clay-bg: var(--eq-clay-bg);
  --color-eq-gray-50: var(--eq-gray-50);
  --color-eq-gray-100: var(--eq-gray-100);
  --color-eq-gray-200: var(--eq-gray-200);
  --color-eq-gray-300: var(--eq-gray-300);
  --color-eq-gray-400: var(--eq-gray-400);
  --color-eq-gray-500: var(--eq-gray-500);
  --color-eq-gray-600: var(--eq-gray-600);
  --color-eq-success-bg: var(--eq-success-bg);
  --color-eq-success-text: var(--eq-success-text);
  --color-eq-warning-bg: var(--eq-warning-bg);
  --color-eq-warning-text: var(--eq-warning-text);
  --color-eq-error-bg: var(--eq-error-bg);
  --color-eq-error-text: var(--eq-error-text);
  --radius-eq-chip: var(--eq-radius-chip);
  --radius-eq-input: var(--eq-radius-input);
  --radius-eq-card: var(--eq-radius-card);
  --radius-eq-shell: var(--eq-radius-shell);
  --radius-eq-pill: var(--eq-radius-pill);
  --shadow-eq-sm: var(--eq-shadow-sm);
  --shadow-eq-lg: var(--eq-shadow-lg);
  --shadow-eq-elevated: var(--eq-shadow-elevated);
  --color-eq-overlay: var(--eq-overlay);
  --color-eq-tier-accent: var(--eq-tier-accent);
  --text-eq-xs: var(--eq-text-xs);
  --text-eq-sm: var(--eq-text-sm);
  --text-eq-base: var(--eq-text-base);
  --text-eq-md: var(--eq-text-md);
  --text-eq-lg: var(--eq-text-lg);
  --text-eq-xl: var(--eq-text-xl);
  --text-eq-2xl: var(--eq-text-2xl);
  --text-eq-3xl: var(--eq-text-3xl);
  --text-eq-4xl: var(--eq-text-4xl);
  --font-sans: var(--font-jakarta), Arial, sans-serif;
}

/* ============================================================================
 * GLOBAL ACCESSIBILITY & MOTION — suite-wide, from the foundation.
 * ========================================================================== */
:where(a, button, input, select, textarea, [tabindex], [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--eq-sky);
  outline-offset: var(--eq-focus-offset, 2px);
  border-radius: var(--eq-radius-chip, 4px);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}