/*
 * LaborLynk shared design tokens — converged-shell semantic layer (LL-26173-30, Phase 0).
 *
 * KEEP LABORLYNK BRANDING AND STYLES: these tokens are SEMANTIC ALIASES over the existing
 * LaborLynk palette defined in styles.css (:root). They introduce NO new brand color and NO
 * new font — LaborLynk's brand stays blue (--primary) and existing styles are the source of
 * truth. The "Profile Experience" comps contribute LAYOUT/STRUCTURE only; color/type stay
 * LaborLynk's. ADDITIVE: nothing changes until a shell opts in to var(--ll-dx-*).
 *
 * Load order: after styles.css's :root so the aliased vars resolve. Mobile mirror:
 * mobile/src/styles/designTokens.ts. Parity: tests/designTokenParityContract.test.js.
 */
:root {
  /* Brand — LaborLynk blue (role-themeable by overriding --ll-dx-color-brand) */
  --ll-dx-color-brand: var(--primary);
  --ll-dx-color-brand-strong: var(--primary-dark);
  --ll-dx-color-brand-soft: var(--primary-soft);

  /* Surfaces — existing LaborLynk surfaces */
  --ll-dx-color-page: var(--bg-soft);
  --ll-dx-color-surface: var(--surface);
  --ll-dx-color-surface-subtle: var(--surface-2);

  /* Text ramp — existing LaborLynk text */
  --ll-dx-color-text-strong: var(--text);
  --ll-dx-color-text: var(--text-secondary);
  --ll-dx-color-text-muted: var(--muted);

  /* Borders — existing LaborLynk borders */
  --ll-dx-color-border: var(--border);
  --ll-dx-color-border-strong: var(--border-strong);
  --ll-dx-color-border-focus: var(--primary);
  --ll-dx-color-border-error: var(--danger);
  --ll-dx-color-border-success: var(--success);

  /* State — existing LaborLynk state colors */
  --ll-dx-color-warn-bg: var(--warning-soft);
  --ll-dx-color-warn-text: var(--warning);
  --ll-dx-color-error-bg: var(--danger-soft);
  --ll-dx-color-error-text: var(--danger);
  --ll-dx-color-success: var(--success);

  /* Typography — existing LaborLynk type scale */
  --ll-dx-font-family: Inter, system-ui, sans-serif;
  --ll-dx-font-weight-regular: 400;
  --ll-dx-font-weight-medium: 600;
  --ll-dx-font-weight-bold: 700;
  --ll-dx-font-weight-heavy: 900;
  --ll-dx-type-page-title: var(--font-2xl);
  --ll-dx-type-section-title: var(--font-xl);
  --ll-dx-type-card-title: var(--font-lg);
  --ll-dx-type-body: var(--font-sm);
  --ll-dx-type-helper: var(--font-xs);
  --ll-dx-type-meta: var(--font-xs);
  --ll-dx-type-button: var(--font-sm);

  /* Spacing — existing LaborLynk rhythm */
  --ll-dx-space-page-inline: var(--ll-shell-padding-inline);
  --ll-dx-space-page-block: var(--ll-shell-padding-block);
  --ll-dx-space-section: var(--ll-rhythm-section);
  --ll-dx-space-card: var(--ll-rhythm-card);
  --ll-dx-space-card-tight: var(--ll-rhythm-card-tight);
  --ll-dx-space-action: var(--ll-rhythm-action);
  --ll-dx-space-grid-gap: var(--ll-layout-gap);

  /* Borders — existing LaborLynk border model */
  --ll-dx-border-width: 1px;
  --ll-dx-border-color: var(--border);
  --ll-dx-border-color-strong: var(--border-strong);
  --ll-dx-border-color-focus: var(--primary);
  --ll-dx-border-color-error: var(--danger);
  --ll-dx-border-color-success: var(--success);

  /* Radii — existing LaborLynk radii (+ pill shape) */
  --ll-dx-radius-card: var(--radius-sm);
  --ll-dx-radius-modal: var(--radius-md);
  --ll-dx-radius-button: var(--radius-sm);
  --ll-dx-radius-input: var(--radius-sm);
  --ll-dx-radius-avatar: var(--radius-md);
  --ll-dx-radius-chip: var(--radius-sm);
  --ll-dx-radius-pill: 999px;

  /* Buttons — existing LaborLynk button tokens */
  --ll-dx-button-height: var(--ll-touch-target);
  --ll-dx-button-gap: var(--ll-rhythm-action);
  --ll-dx-button-padding-inline: var(--space-md);
  --ll-dx-button-radius: var(--ll-system-control-radius);
  --ll-dx-button-primary-bg: var(--button-primary-background);
  --ll-dx-button-primary-text: var(--button-primary-text);
  --ll-dx-button-primary-border: var(--primary);
  --ll-dx-button-secondary-bg: var(--button-secondary-background);
  --ll-dx-button-secondary-text: var(--button-secondary-text);
  --ll-dx-button-secondary-border: var(--border);
  --ll-dx-button-tertiary-bg: transparent;
  --ll-dx-button-tertiary-text: var(--text);
  --ll-dx-button-destructive-bg: var(--danger);
  --ll-dx-button-destructive-text: var(--button-primary-text);
  --ll-dx-button-disabled-bg: var(--disabled-bg);
  --ll-dx-button-disabled-text: var(--disabled-text);
  --ll-dx-button-shadow-primary: var(--shadow-sm);

  /* Cards — existing LaborLynk card surface tokens */
  --ll-dx-card-bg: var(--card-background);
  --ll-dx-card-bg-elevated: var(--card-elevated-background);
  --ll-dx-card-bg-muted: var(--nested-card-background);
  --ll-dx-card-border: var(--border);
  --ll-dx-card-radius: var(--ll-system-card-radius);
  --ll-dx-card-padding: var(--ll-system-card-padding);
  --ll-dx-card-padding-lg: var(--ll-system-card-padding-lg);
  --ll-dx-card-shadow: var(--shadow-sm);
  --ll-dx-card-gap: var(--ll-rhythm-card);

  /* Avatars and logos — existing LaborLynk shape and brand tokens */
  --ll-dx-avatar-nav-size: 42px;
  --ll-dx-avatar-card-size: 48px;
  --ll-dx-avatar-profile-size: 58px;
  --ll-dx-logo-nav-size: 48px;
  --ll-dx-avatar-radius: var(--radius-md);
  --ll-dx-avatar-bg: var(--primary-soft);
  --ll-dx-avatar-text: var(--primary-dark);

  /* Forms and shells — existing LaborLynk controls */
  --ll-dx-input-height: var(--ll-touch-target);
  --ll-dx-input-bg: var(--input-background);
  --ll-dx-input-border: var(--input-border);
  --ll-dx-shell-navbar-height-mobile: var(--ll-mobile-topbar-height);
  --ll-dx-shell-side-rail-width: var(--desktop-sidebar-width);
  --ll-dx-shell-account-menu-width: var(--ll-account-menu-width);
}