/**
 * BDL Visual Foundation — Design Tokens (Phase 1)
 * Source: BDL design-tokens.json / tokens.mdc (v1.1)
 *
 * Product decision (UMS / EMS / Industrial Utilities Monitoring):
 *   --product-primary = Bevywise Blue #1660A7
 * Brand green #149F85 remains brand-only (not the UMS product chrome).
 * Yellow #FFC622 is focus / CTA / interaction only.
 * Semantic colors are never replaced by product blue.
 *
 * Additive only — does not alter vendor CSS. Safe to load; apply via scoped
 * pilot overrides until Phase 2 wires layouts globally.
 */
:root {
  /* —— Brand (identity only) —— */
  --bdl-brand-green: #149F85;
  --bdl-brand-blue: #1660A7;
  --bdl-brand-red: #CB243A;
  --bdl-brand-yellow: #FFC622;
  --bdl-brand-text: #30302E;

  /* —— Product theme: UMS / EMS utilities (NOT MQTT green, NOT MES labeling) —— */
  --bdl-product-primary: #1660A7;
  --bdl-product-primary-hover: #124a82;
  --bdl-product-primary-soft: #e8f0f8;

  /* —— Semantic (status only) —— */
  --bdl-sem-success: #1A7F4B;
  --bdl-sem-warning: #B87A00;
  --bdl-sem-error: #B91C2E;
  --bdl-sem-critical: #991B1B;
  --bdl-sem-info: #1558A0;
  --bdl-sem-focus: #FFC622;
  --bdl-sem-disabled: #9CA3AF;
  --bdl-sem-pending: #D97706;
  --bdl-sem-offline: #6B7280;
  --bdl-sem-online: #16A34A;
  --bdl-sem-maintenance: #7C3AED;

  /* —— Surfaces —— */
  --bdl-surface-topbar: #f5fbf7;
  --bdl-surface-canvas: #F9FAFB;
  --bdl-surface-card: #FFFFFF;
  --bdl-border-default: #E0E0E0;
  --bdl-border-alt: #bccac4;
  --bdl-table-header-bg: #F3F3F6;
  --bdl-neutral-light: #F4F4F2;
  --bdl-neutral-dark: #1A1C1E;

  /* —— Typography —— */
  --bdl-font-family: Inter, "Segoe UI", Roboto, sans-serif;
  --bdl-font-display-lg: 48px;
  --bdl-font-headline-lg: 32px;
  --bdl-font-headline-md: 24px;
  --bdl-font-headline-sm: 20px;
  --bdl-font-body-lg: 16px;
  --bdl-font-body-md: 14px;
  --bdl-font-label-md: 12px;
  --bdl-font-label-sm: 11px;
  --bdl-weight-regular: 400;
  --bdl-weight-medium: 500;
  --bdl-weight-bold: 700;

  /* —— Spacing (8px base) —— */
  --bdl-space-1: 4px;
  --bdl-space-2: 8px;
  --bdl-space-3: 16px;
  --bdl-space-4: 24px;
  --bdl-space-5: 32px;
  --bdl-space-6: 48px;
  --bdl-space-7: 64px;

  /* —— Radius —— */
  --bdl-radius-0: 0;
  --bdl-radius-4: 4px;
  --bdl-radius-8: 8px;
  --bdl-radius-12: 12px;
  --bdl-radius-16: 16px;
  --bdl-radius-full: 9999px;

  /* —— Elevation —— */
  --bdl-elevation-0: none;
  --bdl-elevation-1: 0px 2px 8px rgba(26, 28, 30, 0.08), 0px 1px 2px rgba(26, 28, 30, 0.04);
  --bdl-elevation-3: 0px 4px 16px rgba(26, 28, 30, 0.12), 0px 2px 4px rgba(26, 28, 30, 0.08);
  --bdl-elevation-5: 0px 8px 32px rgba(26, 28, 30, 0.20), 0px 4px 8px rgba(26, 28, 30, 0.12);
  --bdl-scrim: rgba(26, 28, 30, 0.5);

  /* —— Interaction / opacity —— */
  --bdl-focus-ring: 0 0 0 2px var(--bdl-surface-card), 0 0 0 4px var(--bdl-sem-focus);
  --bdl-opacity-disabled: 0.4;
  --bdl-opacity-hover-overlay: 0.08;
  --bdl-control-height: 40px;

  /* —— Motion —— */
  --bdl-duration-fast: 150ms;
  --bdl-duration-base: 250ms;
  --bdl-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* —— Breakpoints (documentation reference; use in media queries) —— */
  /* mobile 390 · tablet/HMI 834 · desktop 1440 · ultra 1920 */
}