/* Generated by tools/build-crm-design-system.php. Do not edit. */

/* Source: assets/ui/src/native/00-tokens.css */
/* Generated native token contract. Do not edit. */
@layer tokens, foundation, layout, components, patterns, domains, controls, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Primitive palette: raw color values live in this file only. */
    --crm-primitive-ink-950: #0b1628;
    --crm-primitive-ink-900: #11213a;
    --crm-primitive-ink-800: #1c3150;
    --crm-primitive-ink-700: #334b69;
    --crm-primitive-ink-600: #526985;
    --crm-primitive-ink-550: #64748b;
    --crm-primitive-ink-500: #70839b;
    --crm-primitive-ink-400: #7b8391;
    --crm-primitive-ink-300: #b5c2d1;
    --crm-primitive-ink-200: #d4dde8;
    --crm-primitive-ink-100: #e8edf3;
    --crm-primitive-ink-050: #f4f7fa;
    --crm-primitive-white: #ffffff;
    --crm-primitive-black: #000000;
    --crm-primitive-navy-900: #0d2140;
    --crm-primitive-navy-800: #13305a;
    --crm-primitive-blue-700: #075bb8;
    --crm-primitive-blue-600: #0872df;
    --crm-primitive-blue-200: #a9cff8;
    --crm-primitive-blue-100: #dcecff;
    --crm-primitive-blue-050: #f1f7ff;
    --crm-primitive-green-800: #08633a;
    --crm-primitive-green-100: #d8f3e5;
    --crm-primitive-amber-900: #744700;
    --crm-primitive-amber-100: #fcebc8;
    --crm-primitive-teal-700: #0f8aa3;
    --crm-primitive-paper: #ffffff;
    --crm-primitive-paper-line: #d4dde8;
    --crm-primitive-paper-ink: #11213a;
    --crm-primitive-paper-muted: #526985;
    --crm-primitive-paper-glow: #f1f7ff;
    --crm-primitive-red-800: #9a2631;
    --crm-primitive-red-950: #690005;
    --crm-primitive-red-200: #ffb4ab;
    --crm-primitive-red-100: #fee1e4;
    --crm-primitive-shadow: #13294724;
    --crm-primitive-overlay: #071426b8;
    --crm-primitive-transparent: transparent;

    /* Typography is local-first and intentionally has no network dependency. */
    --crm-font-body: var(--crm-font-ui, "iransans-web", sans-serif);
    --crm-font-display: var(--crm-font-ui, "iransans-web", sans-serif);
    --crm-font-data: var(--crm-font-ui, "iransans-web", sans-serif);
    --crm-font-size-1: 0.75rem;
    --crm-font-size-2: 0.8125rem;
    --crm-font-size-3: 0.875rem;
    --crm-font-size-4: 1rem;
    --crm-font-size-5: 1.125rem;
    --crm-font-size-6: 1.375rem;
    --crm-font-size-7: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --crm-line-tight: 1.35;
    --crm-line-body: 1.75;
    --crm-line-relaxed: 1.9;
    --crm-weight-regular: 400;
    --crm-weight-medium: 400;
    --crm-weight-semibold: 400;
    --crm-weight-strong: 400;
    --crm-weight-bold: 400;
    --crm-weight-extrabold: 400;
    --crm-weight-black: 400;

    /* Four-pixel spacing rhythm and bounded shape language. */
    --crm-space-0: 0;
    --crm-space-1: 0.25rem;
    --crm-space-2: 0.5rem;
    --crm-space-3: 0.75rem;
    --crm-space-4: 1rem;
    --crm-space-5: 1.25rem;
    --crm-space-6: 1.5rem;
    --crm-space-8: 2rem;
    --crm-space-10: 2.5rem;
    --crm-space-12: 3rem;
    --crm-radius-none: 0;
    --crm-radius-small: 0.25rem;
    --crm-radius-control: 0.375rem;
    --crm-radius-surface: 0.5rem;
    --crm-radius-kpi: 1rem;
    --crm-focus-ring-width: 0.125rem;
    --crm-focus-ring-offset: 0.125rem;
    --crm-control-min-size: 2.75rem;
    --crm-icon-size: 1.125rem;
    --crm-content-max: 90rem;
    --crm-reading-max: 72ch;
    --crm-border-thin: 0.0625rem;
    --crm-border-accent: 0.25rem;
    --crm-shadow-surface: 0 0.25rem 1rem var(--crm-primitive-shadow);
    --crm-shadow-combobox-panel: 0 18px 48px rgb(15 23 42 / 20%);
    --crm-shadow-combobox-trigger-focus: 0 0 0 3px rgb(76 131 212 / 14%);
    --crm-shadow-combobox-search-focus: 0 0 0 3px rgb(76 131 212 / 12%);
    --crm-duration-fast: 120ms;
    --crm-duration-standard: 180ms;
    --crm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --crm-z-navigation: 30;
    --crm-z-header: 20;
    --crm-z-menu: 50;
    --crm-z-dialog: 80;

    /* Light semantic theme. */
    --crm-color-canvas: var(--crm-primitive-ink-050);
    --crm-color-surface: var(--crm-primitive-white);
    --crm-color-surface-subtle: var(--crm-primitive-blue-050);
    --crm-color-surface-strong: var(--crm-primitive-navy-900);
    --crm-color-text: var(--crm-primitive-ink-900);
    --crm-color-text-muted: var(--crm-primitive-ink-600);
    --crm-color-text-subtle: var(--crm-primitive-ink-550);
    --crm-color-text-inverse: var(--crm-primitive-white);
    --crm-color-border: var(--crm-primitive-ink-200);
    --crm-color-border-strong: var(--crm-primitive-ink-300);
    --crm-color-action-primary: var(--crm-theme-accent, var(--crm-primitive-blue-700));
    --crm-color-action-hover: var(--crm-primitive-blue-600);
    --crm-color-action-soft: var(--crm-primitive-blue-100);
    --crm-color-focus: var(--crm-color-action-primary);
    --crm-color-focus-contrast: var(--crm-primitive-white);
    --crm-color-positive: var(--crm-primitive-green-800);
    --crm-color-positive-soft: var(--crm-primitive-green-100);
    --crm-color-warning: var(--crm-primitive-amber-900);
    --crm-color-warning-soft: var(--crm-primitive-amber-100);
    --crm-color-critical: var(--crm-primitive-red-800);
    --crm-color-critical-soft: var(--crm-primitive-red-100);
    --crm-color-on-critical: var(--crm-primitive-white);
    --crm-color-info: var(--crm-primitive-teal-700);
    --crm-color-info-strong: var(--crm-primitive-blue-700);
    --crm-color-kpi-paper: var(--crm-primitive-white);
    --crm-color-kpi-line: var(--crm-primitive-ink-200);
    --crm-color-kpi-ink: var(--crm-primitive-ink-900);
    --crm-color-kpi-muted: var(--crm-primitive-ink-600);
    --crm-color-kpi-glow: var(--crm-primitive-blue-050);
    --crm-color-kpi-on-accent: var(--crm-primitive-white);
    --crm-kpi-accent-wash: 16%;
    --crm-kpi-accent-wash-hover: 22%;
    --crm-kpi-spot-wash: 26%;
    --crm-kpi-glow-wash: 28%;
    --crm-color-overlay: var(--crm-primitive-overlay);
    --crm-color-shadow: var(--crm-primitive-shadow);
    --crm-color-transparent: var(--crm-primitive-transparent);
    --crm-color-print-text: var(--crm-primitive-black);
    --crm-color-print-surface: var(--crm-primitive-white);
    --crm-color-print-border: var(--crm-primitive-black);

    /* Stable component aliases form the supported styling API. */
    --crm-button-primary-background: var(--crm-color-action-primary);
    --crm-button-primary-text: var(--crm-color-text-inverse);
    --crm-button-info-background: var(--crm-color-info-strong);
    --crm-button-info-text: var(--crm-primitive-white);
    --crm-button-secondary-background: var(--crm-color-surface);
    --crm-button-secondary-text: var(--crm-color-text);
    --crm-control-background: var(--crm-color-surface);
    --crm-control-border: var(--crm-primitive-ink-500);
    --crm-card-background: var(--crm-color-surface);
    --crm-card-border: var(--crm-color-border-strong);
    --crm-record-accent: var(--crm-color-action-primary);
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --crm-color-focus: var(--crm-color-action-primary);
    --crm-color-focus-contrast: var(--crm-primitive-white);
    --crm-color-on-critical: var(--crm-primitive-white);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --crm-shadow-combobox-panel: 0 20px 52px rgb(0 0 0 / 48%);
    --crm-color-canvas: var(--crm-primitive-ink-950);
    --crm-color-surface: var(--crm-primitive-ink-900);
    --crm-color-surface-subtle: var(--crm-primitive-ink-800);
    --crm-color-surface-strong: var(--crm-primitive-navy-900);
    --crm-color-text: var(--crm-primitive-ink-050);
    --crm-color-text-muted: var(--crm-primitive-ink-300);
    --crm-color-text-subtle: var(--crm-primitive-ink-400);
    --crm-color-text-inverse: var(--crm-primitive-white);
    --crm-color-border: var(--crm-primitive-ink-700);
    --crm-color-border-strong: var(--crm-primitive-ink-500);
    --crm-color-action-primary: var(--crm-primitive-blue-200);
    --crm-color-action-hover: var(--crm-primitive-blue-100);
    --crm-color-action-soft: var(--crm-primitive-ink-800);
    --crm-color-focus: var(--crm-color-action-primary);
    --crm-color-focus-contrast: var(--crm-primitive-white);
    --crm-color-positive: var(--crm-primitive-green-100);
    --crm-color-positive-soft: var(--crm-primitive-ink-800);
    --crm-color-warning: var(--crm-primitive-amber-100);
    --crm-color-warning-soft: var(--crm-primitive-ink-800);
    --crm-color-critical: var(--crm-primitive-red-200);
    --crm-color-critical-soft: var(--crm-primitive-ink-800);
    --crm-color-on-critical: var(--crm-primitive-red-950);
    --crm-color-info: var(--crm-primitive-blue-200);
    --crm-color-info-strong: var(--crm-primitive-blue-200);
    --crm-color-kpi-paper: var(--crm-primitive-ink-900);
    --crm-color-kpi-line: var(--crm-primitive-ink-700);
    --crm-color-kpi-ink: var(--crm-primitive-ink-050);
    --crm-color-kpi-muted: var(--crm-primitive-ink-300);
    --crm-color-kpi-glow: var(--crm-primitive-ink-800);
    --crm-color-kpi-on-accent: var(--crm-primitive-ink-950);
    --crm-kpi-accent-wash: 14%;
    --crm-kpi-accent-wash-hover: 20%;
    --crm-kpi-spot-wash: 22%;
    --crm-kpi-glow-wash: 22%;
    --crm-button-primary-background: var(--crm-primitive-blue-200);
    --crm-button-primary-text: var(--crm-primitive-ink-950);
    --crm-button-info-background: var(--crm-primitive-blue-200);
    --crm-button-info-text: var(--crm-primitive-ink-950);
    --crm-control-border: var(--crm-primitive-ink-300);
  }

  html.dark-mode body[id="crm-radius-system"].crm-enterprise-ui {
    --crm-shadow-combobox-panel: 0 20px 52px rgb(0 0 0 / 48%);
    --crm-color-kpi-paper: var(--crm-primitive-ink-900);
    --crm-color-kpi-line: var(--crm-primitive-ink-700);
    --crm-color-kpi-ink: var(--crm-primitive-ink-050);
    --crm-color-kpi-muted: var(--crm-primitive-ink-300);
    --crm-color-kpi-glow: var(--crm-primitive-ink-800);
    --crm-color-kpi-on-accent: var(--crm-primitive-ink-950);
    --crm-kpi-accent-wash: 14%;
    --crm-kpi-accent-wash-hover: 20%;
    --crm-kpi-spot-wash: 22%;
    --crm-kpi-glow-wash: 22%;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --crm-shadow-combobox-panel: 0 20px 52px rgb(0 0 0 / 48%);
      --crm-color-canvas: var(--crm-primitive-ink-950);
      --crm-color-surface: var(--crm-primitive-ink-900);
      --crm-color-surface-subtle: var(--crm-primitive-ink-800);
      --crm-color-surface-strong: var(--crm-primitive-navy-900);
      --crm-color-text: var(--crm-primitive-ink-050);
      --crm-color-text-muted: var(--crm-primitive-ink-300);
      --crm-color-text-subtle: var(--crm-primitive-ink-400);
      --crm-color-text-inverse: var(--crm-primitive-white);
      --crm-color-border: var(--crm-primitive-ink-700);
      --crm-color-border-strong: var(--crm-primitive-ink-500);
      --crm-color-action-primary: var(--crm-primitive-blue-200);
      --crm-color-action-hover: var(--crm-primitive-blue-100);
      --crm-color-action-soft: var(--crm-primitive-ink-800);
      --crm-color-focus: var(--crm-color-action-primary);
      --crm-color-focus-contrast: var(--crm-primitive-white);
      --crm-color-positive: var(--crm-primitive-green-100);
      --crm-color-positive-soft: var(--crm-primitive-ink-800);
      --crm-color-warning: var(--crm-primitive-amber-100);
      --crm-color-warning-soft: var(--crm-primitive-ink-800);
      --crm-color-critical: var(--crm-primitive-red-200);
      --crm-color-critical-soft: var(--crm-primitive-ink-800);
      --crm-color-on-critical: var(--crm-primitive-red-950);
      --crm-color-info: var(--crm-primitive-blue-200);
      --crm-color-info-strong: var(--crm-primitive-blue-200);
      --crm-color-kpi-paper: var(--crm-primitive-ink-900);
      --crm-color-kpi-line: var(--crm-primitive-ink-700);
      --crm-color-kpi-ink: var(--crm-primitive-ink-050);
      --crm-color-kpi-muted: var(--crm-primitive-ink-300);
      --crm-color-kpi-glow: var(--crm-primitive-ink-800);
      --crm-color-kpi-on-accent: var(--crm-primitive-ink-950);
      --crm-kpi-accent-wash: 14%;
      --crm-kpi-accent-wash-hover: 20%;
      --crm-kpi-spot-wash: 22%;
      --crm-kpi-glow-wash: 22%;
      --crm-button-primary-background: var(--crm-primitive-blue-200);
      --crm-button-primary-text: var(--crm-primitive-ink-950);
      --crm-button-info-background: var(--crm-primitive-blue-200);
      --crm-button-info-text: var(--crm-primitive-ink-950);
      --crm-control-border: var(--crm-primitive-ink-300);
    }
}

  @media (forced-colors: active) {
    :root {
      --crm-color-canvas: Canvas;
      --crm-color-surface: Canvas;
      --crm-color-surface-subtle: Canvas;
      --crm-color-surface-strong: Canvas;
      --crm-color-text: CanvasText;
      --crm-color-text-muted: CanvasText;
      --crm-color-text-subtle: CanvasText;
      --crm-color-text-inverse: HighlightText;
      --crm-color-border: ButtonText;
      --crm-color-border-strong: ButtonText;
      --crm-color-action-primary: LinkText;
      --crm-color-action-hover: LinkText;
      --crm-color-action-soft: Canvas;
      --crm-color-focus: Highlight;
      --crm-color-focus-contrast: Canvas;
      --crm-color-positive: CanvasText;
      --crm-color-positive-soft: Canvas;
      --crm-color-warning: CanvasText;
      --crm-color-warning-soft: Canvas;
      --crm-color-critical: CanvasText;
      --crm-color-critical-soft: Canvas;
      --crm-color-on-critical: Canvas;
      --crm-color-info: LinkText;
      --crm-color-info-strong: LinkText;
      --crm-color-kpi-paper: Canvas;
      --crm-color-kpi-line: CanvasText;
      --crm-color-kpi-ink: CanvasText;
      --crm-color-kpi-muted: CanvasText;
      --crm-color-kpi-glow: Canvas;
      --crm-color-kpi-on-accent: CanvasText;
      --crm-color-overlay: Canvas;
      --crm-color-shadow: transparent;
      --crm-button-primary-background: Highlight;
      --crm-button-primary-text: HighlightText;
      --crm-button-info-background: Highlight;
      --crm-button-info-text: HighlightText;
      --crm-control-border: ButtonText;
    }
}
}

/* BEGIN GENERATED MIGRATED COLOR TOKENS */

/* Source: assets/ui/src/native/05-login-primitives.css */
/* Route-owned primitive palette for visual parity with the active production login. */
@layer tokens {
  :root {
    --crm-primitive-raya-cyan-500: #04c1f3;
    --crm-primitive-raya-blue-600: #188ae2;
    --crm-primitive-raya-green-600: #10c469;
    --crm-primitive-raya-red-500: #ef4444;
    --crm-primitive-raya-amber-500: #f59e0b;
    --crm-primitive-raya-cloud-100: #eef4fb;
    --crm-primitive-raya-cloud-050: #f8fafc;
    --crm-primitive-raya-cloud-200: #dbe4ee;
    --crm-primitive-raya-ink-950: #08111f;
    --crm-primitive-raya-ink-900: #0f172a;
    --crm-primitive-raya-ink-850: #101827;
    --crm-primitive-raya-ink-700: #334155;
    --crm-primitive-raya-ink-500: #64748b;
    --crm-primitive-raya-ink-400: #94a3b8;
    --crm-primitive-raya-blue-100: #dbeafe;

    /* Measured production field colors retained only where their active
     * combinations satisfy the login accessibility contract. */
    --crm-primitive-login-field-light-fill: #f1f4f7;
    --crm-primitive-login-field-light-focus-fill: #f8fafc;
    --crm-primitive-login-field-light-focus-border: #3f819f;
    --crm-primitive-login-field-light-text: #202b3a;
    --crm-primitive-login-field-dark-fill: #111923;
    --crm-primitive-login-field-dark-focus-fill: #16222d;
    --crm-primitive-login-field-dark-focus-border: #64aaca;
    --crm-primitive-login-field-dark-text: #edf2f7;
    --crm-primitive-login-field-dark-placeholder: #96a3b2;
  }
}

/* Source: assets/ui/src/native/10-component-tokens.css */
/* Native-only component aliases that are supplied by the runtime theme. */
@layer tokens {
  :root {
    --crm-button-primary-hover: var(--crm-color-action-hover);
  }

  @media (forced-colors: active) {
    :root {
      --crm-button-primary-hover: Highlight;
    }
  }
}

/* Source: assets/ui/src/native/15-login-component-tokens.css */
/* Semantic and component aliases for the native production-parity login. */
@layer tokens {
  :root {
    --crm-login-accent: var(--crm-primitive-raya-cyan-500);
    --crm-login-accent-strong: var(--crm-primitive-raya-blue-600);
    --crm-login-success: var(--crm-primitive-raya-green-600);
    --crm-login-danger: var(--crm-primitive-raya-red-500);
    --crm-login-warning: var(--crm-primitive-raya-amber-500);
    --crm-login-page: var(--crm-primitive-raya-cloud-100);
    --crm-login-page-alt: var(--crm-primitive-white);
    --crm-login-surface: var(--crm-primitive-white);
    --crm-login-input: var(--crm-primitive-raya-cloud-050);
    --crm-login-input-border: var(--crm-primitive-raya-cloud-200);
    --crm-login-text: var(--crm-primitive-raya-ink-850);
    --crm-login-text-secondary: var(--crm-primitive-raya-ink-700);
    --crm-login-text-muted: var(--crm-primitive-raya-ink-500);
    --crm-login-dark-page: var(--crm-primitive-raya-ink-950);
    --crm-login-dark-page-alt: var(--crm-primitive-raya-ink-900);
    --crm-login-dark-surface: var(--crm-primitive-raya-ink-850);
    --crm-login-dark-text: var(--crm-primitive-raya-cloud-050);
    --crm-login-dark-text-secondary: var(--crm-primitive-raya-blue-100);
    --crm-login-dark-text-muted: var(--crm-primitive-raya-ink-400);

    /* Theme-specific semantic pairs. These are kept separate so contrast can be
     * validated without depending on translucent decorative surfaces. */
    --crm-login-control-border-light: var(--crm-primitive-raya-ink-500);
    --crm-login-control-border-dark: var(--crm-primitive-raya-ink-400);
    --crm-login-focus-light: var(--crm-primitive-raya-blue-600);
    --crm-login-focus-light-contrast: var(--crm-primitive-white);
    --crm-login-focus-dark: var(--crm-primitive-raya-blue-100);
    --crm-login-focus-dark-contrast: var(--crm-primitive-raya-ink-950);
    --crm-login-danger-text-light: var(--crm-primitive-red-800);
    --crm-login-danger-text-dark: var(--crm-primitive-red-200);
    --crm-login-warning-text-light: var(--crm-primitive-amber-900);
    --crm-login-warning-text-dark: var(--crm-primitive-amber-100);
    --crm-login-on-accent: var(--crm-primitive-raya-ink-950);
    --crm-login-skip-background: var(--crm-login-accent);
    --crm-login-skip-text: var(--crm-primitive-raya-ink-950);
    --crm-login-skip-border: var(--crm-primitive-raya-ink-950);

    /* Login field contract. Production colors are active only in combinations
     * that preserve WCAG text, boundary and focus contrast. */
    --crm-login-field-fill-light: var(--crm-primitive-login-field-light-fill);
    --crm-login-field-focus-fill-light: var(--crm-primitive-login-field-light-focus-fill);
    --crm-login-field-text-light: var(--crm-primitive-login-field-light-text);
    --crm-login-field-placeholder-light: var(--crm-login-text-secondary);
    --crm-login-field-border-light: var(--crm-login-control-border-light);
    --crm-login-field-hover-border-light: var(--crm-primitive-login-field-light-focus-border);
    --crm-login-field-focus-border-light: var(--crm-primitive-login-field-light-focus-border);
    --crm-login-field-fill-dark: var(--crm-primitive-login-field-dark-fill);
    --crm-login-field-focus-fill-dark: var(--crm-primitive-login-field-dark-focus-fill);
    --crm-login-field-text-dark: var(--crm-primitive-login-field-dark-text);
    --crm-login-field-placeholder-dark: var(--crm-primitive-login-field-dark-placeholder);
    --crm-login-field-border-dark: var(--crm-login-control-border-dark);
    --crm-login-field-hover-border-dark: var(--crm-primitive-login-field-dark-focus-border);
    --crm-login-field-focus-border-dark: var(--crm-primitive-login-field-dark-focus-border);
    --crm-login-field-radius: 7px;
    --crm-login-field-font-size: var(--crm-font-size-2);
    --crm-login-label-margin-block-end: 6px;
    --crm-login-field-shadow-light: inset 0 1px 0 rgb(255 255 255 / 6%);
    --crm-login-field-shadow-dark: inset 0 1px 0 rgb(255 255 255 / 6%);
    --crm-login-field-focus-shadow-light: 0 0 0 5px var(--crm-login-focus-halo-light);
    --crm-login-field-focus-shadow-dark: 0 0 0 5px var(--crm-login-focus-halo-dark);
    --crm-login-field-focus-ring-light:
      0 0 0 2px var(--crm-login-focus-light-contrast),
      0 0 0 7px var(--crm-login-focus-halo-light);
    --crm-login-field-focus-ring-dark:
      0 0 0 2px var(--crm-login-focus-dark-contrast),
      0 0 0 7px var(--crm-login-focus-halo-dark);
    --crm-login-panel-heading-max: 1.875rem;

    /* Component surfaces and effects. Pattern owners consume only these
     * semantic aliases; raw color recipes remain centralized here. */
    --crm-login-surface-glass-light: rgb(255 255 255 / 92%);
    --crm-login-surface-soft-light: rgb(255 255 255 / 72%);
    --crm-login-border-light: rgb(148 163 184 / 28%);
    --crm-login-card-shadow-light: 0 24px 70px rgb(15 23 42 / 16%);
    --crm-login-soft-shadow-light: 0 10px 30px rgb(15 23 42 / 10%);
    --crm-login-focus-halo-light: rgb(4 193 243 / 22%);
    --crm-login-grid-line-light: rgb(4 193 243 / 9%);
    --crm-login-surface-glass-dark: rgb(15 23 42 / 82%);
    --crm-login-surface-soft-dark: rgb(15 23 42 / 58%);
    --crm-login-border-dark: rgb(148 163 184 / 18%);
    --crm-login-card-shadow-dark: 0 28px 90px rgb(0 0 0 / 48%);
    --crm-login-soft-shadow-dark: 0 18px 50px rgb(0 0 0 / 28%);
    --crm-login-focus-halo-dark: rgb(4 193 243 / 26%);
    --crm-login-grid-line-dark: rgb(125 211 252 / 8%);
    --crm-login-page-glow-cyan: rgb(4 193 243 / 28%);
    --crm-login-page-glow-green: rgb(16 196 105 / 22%);
    --crm-login-page-glow-blue: rgb(24 138 226 / 20%);
    --crm-login-orb-cyan: rgb(4 193 243 / 20%);
    --crm-login-orb-green: rgb(16 196 105 / 14%);
    --crm-login-hover-border: rgb(4 193 243 / 48%);
    --crm-login-panel-shine: rgb(255 255 255 / 20%);
    --crm-login-panel-accent: rgb(4 193 243 / 13%);
    --crm-login-danger-border: rgb(239 68 68 / 30%);
    --crm-login-danger-surface: rgb(239 68 68 / 10%);
    --crm-login-warning-border: rgb(245 158 11 / 30%);
    --crm-login-warning-surface: rgb(245 158 11 / 10%);
    --crm-login-control-inset: inset 0 1px 0 rgb(255 255 255 / 6%);
    --crm-login-control-hover: rgb(148 163 184 / 12%);
    --crm-login-check-shadow: 0 8px 18px rgb(4 193 243 / 28%);
    --crm-login-button-highlight: rgb(255 255 255 / 22%);
    --crm-login-button-shadow: 0 18px 34px rgb(4 193 243 / 32%);
    --crm-login-button-shadow-hover: 0 22px 42px rgb(4 193 243 / 40%);
    --crm-login-spinner-track: rgb(8 17 31 / 38%);
    --crm-login-panel-glow-cyan: rgb(4 193 243 / 18%);
    --crm-login-panel-glow-green: rgb(16 196 105 / 13%);
  }
}

/* Source: assets/ui/src/10-foundation.css */
@layer foundation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(html) {
    min-inline-size: 20rem;
    font-size: 100%;
    line-height: var(--crm-line-body);
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  :where(body) {
    min-block-size: 100vh;
    margin: var(--crm-space-0);
    color: var(--crm-color-text);
    background: var(--crm-color-canvas);
    font-size: var(--crm-font-size-3);
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(button, input, select, textarea) {
    font-size: max(1rem, 1em);
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(h1, h2, h3, p, dl, dd, figure, blockquote) {
    margin-block: var(--crm-space-0);
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(h1, h2, h3) {
    color: var(--crm-color-text);
    line-height: var(--crm-line-tight);
    text-wrap: balance;
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(h1) {
    font-size: var(--crm-font-size-7);;
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(h2) {
    font-size: var(--crm-font-size-5);;
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(h3) {
    font-size: var(--crm-font-size-4);;
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(p, li, dd, dt, small, label, th, td, caption) {
    overflow-wrap: anywhere;
  }

  :where(small) {
    font-size: var(--crm-font-size-1);
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(a) {
    color: var(--crm-color-action-primary);
    text-underline-offset: 0.18em;
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(a:hover) {
    color: var(--crm-color-action-hover);
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(button, summary, a[href], input, select, textarea) {
    -webkit-tap-highlight-color: var(--crm-color-transparent);
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(button, summary) {
    touch-action: manipulation;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
  }

  /* REMOVED: global :where(svg) with stroke — affected TinyMCE, FontAwesome,
   * and all third-party SVGs. Apply stroke only to scoped icon components. */

  body[id="crm-radius-system"].crm-enterprise-ui :where(table) {
    border-collapse: collapse;
    border-spacing: var(--crm-space-0);
  }

  :where([hidden]) {
    display: none;
  }

  :where([dir="ltr"], .crm-bidi-isolate) {
    unicode-bidi: isolate;
  }

  body[id="crm-radius-system"].crm-enterprise-ui :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: var(--crm-focus-ring-width) solid var(--crm-color-focus);
    outline-offset: var(--crm-focus-ring-offset);
  }

  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  ::selection {
    color: var(--crm-button-primary-text);
    background: var(--crm-button-primary-background);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(html) {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.001ms;
      animation-iteration-count: 1;
      scroll-behavior: auto;
      transition-duration: 0.001ms;
    }
  }

  @media (forced-colors: active) {
    body[id="crm-radius-system"].crm-enterprise-ui :where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
      outline-color: var(--crm-color-focus);
    }

    :where(svg) {
      forced-color-adjust: auto;
    }
  }

  @media print {
    :where(html, body) {
      min-inline-size: 0;
      color: var(--crm-color-print-text);
      background: var(--crm-color-print-surface);
    }

    body[id="crm-radius-system"].crm-enterprise-ui :where(a) {
      color: var(--crm-color-print-text);
      text-decoration: underline;
    }
  }
}

/* Source: assets/ui/src/patterns/login.css */
@layer patterns {
  .crm-auth-page,
  .crm-auth-page *,
  .crm-auth-page *::before,
  .crm-auth-page *::after {
    box-sizing: border-box;
  }

  .crm-auth-page {
    --crm-auth-aside-surface: var(--crm-primitive-navy-900);
    --crm-auth-aside-text: var(--crm-primitive-white);
    --crm-auth-control-border: var(--crm-control-border);
    --crm-auth-focus: var(--crm-primitive-blue-700);
    --crm-auth-focus-contrast: var(--crm-primitive-white);
    --crm-auth-focus-ring-width: max(2px, var(--crm-focus-ring-width));
    min-block-size: 100svh;
    margin: var(--crm-space-0);
    overflow-x: clip;
    background: var(--crm-color-canvas);
    color: var(--crm-color-text);
    font-family: var(--crm-font-body);
    font-size: var(--crm-font-size-4);
    line-height: 1.8;
    color-scheme: light dark;
  }

  .crm-auth-page button,
  .crm-auth-page input {
    font: inherit;
  }

  .crm-auth-sr-only,
  .login-sr-only {
    position: absolute;
    inline-size: var(--crm-border-thin);
    block-size: var(--crm-border-thin);
    padding: var(--crm-space-0);
    margin: calc(-1 * var(--crm-border-thin));
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: var(--crm-space-0);
  }

  .crm-auth-skip {
    position: fixed;
    z-index: var(--crm-z-dialog);
    inset-block-start: var(--crm-space-3);
    inset-inline-start: var(--crm-space-3);
    padding: var(--crm-space-2) var(--crm-space-4);
    border: var(--crm-border-thin) solid var(--crm-color-focus);
    border-radius: var(--crm-radius-control);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--crm-space-6)));
    transition: transform var(--crm-duration-fast) var(--crm-ease-standard);
  }

  .crm-auth-skip:focus-visible {
    transform: translateY(0);
  }

  .crm-auth-main {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(var(--crm-space-4), 5vw, var(--crm-space-10));
  }

  .crm-auth-actions {
    position: fixed;
    z-index: var(--crm-z-header);
    inset-block-start: var(--crm-space-4);
    inset-inline-end: var(--crm-space-4);
  }

  .crm-auth-theme-toggle,
  .crm-auth-password-toggle,
  .crm-auth-help-trigger {
    border: var(--crm-border-thin) solid var(--crm-color-border-strong);
    background: var(--crm-color-surface);
    color: var(--crm-color-text);
    cursor: pointer;
  }

  .crm-auth-theme-toggle {
    min-block-size: var(--crm-control-min-size);
    padding-inline: var(--crm-space-4);
    border-radius: var(--crm-radius-control);
  }

  .crm-auth-layout {
    inline-size: min(100%, 64rem);
    display: grid;
    grid-template-columns: minmax(18rem, 27rem) minmax(0, 1fr);
    align-items: stretch;
    border: var(--crm-border-thin) solid var(--crm-color-border-strong);
    border-radius: var(--crm-radius-kpi);
    background: var(--crm-color-surface);
    box-shadow: var(--crm-shadow-surface);
    overflow: hidden;
  }

  .crm-auth-page--compact .crm-auth-layout,
  .crm-auth-page--minimal .crm-auth-layout {
    inline-size: min(100%, 30rem);
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-auth-page--minimal .crm-auth-layout {
    box-shadow: var(--crm-shadow-surface);
  }

  .crm-auth-card {
    min-inline-size: 0;
    padding: clamp(var(--crm-space-5), 5vw, var(--crm-space-10));
    background: var(--crm-color-surface);
  }

  .crm-auth-page--compact .crm-auth-card {
    border-block-start: var(--crm-border-accent) solid var(--crm-color-action-primary);
  }

  .crm-auth-page--minimal .crm-auth-card {
    border-inline-start: var(--crm-border-accent) solid var(--crm-color-action-primary);
  }

  .crm-auth-header {
    display: grid;
    justify-items: center;
    text-align: center;
    margin-block-end: var(--crm-space-6);
  }

  .crm-auth-logo {
    inline-size: 5rem;
    block-size: 5rem;
    display: grid;
    place-items: center;
    margin-block-end: var(--crm-space-3);
  }

  .crm-auth-logo img {
    display: block;
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
  }

  .crm-auth-eyebrow,
  .crm-auth-description,
  .crm-auth-aside__eyebrow,
  .crm-auth-aside p,
  .crm-auth-footer {
    color: var(--crm-color-text-muted);
  }

  .crm-auth-eyebrow,
  .crm-auth-description {
    margin: var(--crm-space-0);
  }

  .crm-auth-eyebrow,
  .crm-auth-aside__eyebrow {
    font-size: var(--crm-font-size-2);
  }

  .crm-auth-header h1 {
    margin: var(--crm-space-1) var(--crm-space-0);
    color: var(--crm-color-text);
    font-size: var(--crm-font-size-7);
    line-height: 1.5;
  }

  .crm-auth-description {
    max-inline-size: 34ch;
  }

  .crm-auth-messages:empty {
    display: none;
  }

  .crm-auth-alert {
    margin-block-end: var(--crm-space-4);
    padding: var(--crm-space-3) var(--crm-space-4);
    border: var(--crm-border-thin) solid currentColor;
    border-radius: var(--crm-radius-control);
  }

  .crm-auth-alert--notice {
    background: var(--crm-color-warning-soft);
    color: var(--crm-color-warning);
  }

  .crm-auth-alert--error {
    background: var(--crm-color-critical-soft);
    color: var(--crm-color-critical);
  }

  .crm-auth-form {
    display: grid;
    gap: var(--crm-space-4);
  }

  .crm-auth-field {
    display: grid;
    gap: var(--crm-space-2);
  }

  .crm-auth-field > label {
    color: var(--crm-color-text);

  }

  .crm-auth-control {
    position: relative;
    min-inline-size: 0;
  }

  .crm-auth-input {
    inline-size: 100%;
    min-block-size: var(--crm-control-min-size);
    padding: var(--crm-space-3) var(--crm-space-4);
    border: var(--crm-border-thin) solid var(--crm-auth-control-border);
    border-radius: var(--crm-radius-control);
    background: var(--crm-control-background);
    color: var(--crm-color-text);
    caret-color: var(--crm-color-action-primary);
    transition:
      border-color var(--crm-duration-fast) var(--crm-ease-standard),
      box-shadow var(--crm-duration-fast) var(--crm-ease-standard);
  }

  .crm-auth-control--password .crm-auth-input {
    padding-inline-end: 5.5rem;
  }

  .crm-auth-input::placeholder {
    color: var(--crm-color-text-muted);
    opacity: 1;
  }

  .crm-auth-input:hover {
    border-color: var(--crm-color-border-strong);
  }

  .crm-auth-input[aria-invalid="true"] {
    border-color: var(--crm-color-critical);
    border-inline-start-width: var(--crm-border-accent);
  }

  .crm-auth-password-toggle {
    position: absolute;
    inset-block: var(--crm-space-1);
    inset-inline-end: var(--crm-space-1);
    min-inline-size: 4.5rem;
    min-block-size: calc(var(--crm-control-min-size) - var(--crm-space-2));
    padding-inline: var(--crm-space-3);
    border-radius: var(--crm-radius-control);
  }

  .crm-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--crm-space-3);
    flex-wrap: wrap;
  }

  .crm-auth-check {
    min-block-size: var(--crm-control-min-size);
    display: inline-flex;
    align-items: center;
    gap: var(--crm-space-2);
    color: var(--crm-color-text);
    cursor: pointer;
  }

  .crm-auth-check input {
    inline-size: var(--crm-space-5);
    block-size: var(--crm-space-5);
    margin: var(--crm-space-0);
    accent-color: var(--crm-color-action-primary);
  }

  .crm-auth-help-trigger {
    min-block-size: var(--crm-control-min-size);
    padding-inline: var(--crm-space-2);
    border-color: var(--crm-color-transparent);
    background: var(--crm-color-transparent);
    color: var(--crm-color-action-primary);
    text-decoration: underline;
    text-underline-offset: var(--crm-space-1);
  }

  .crm-auth-recovery {
    margin: var(--crm-space-0);
    padding: var(--crm-space-3) var(--crm-space-4);
    border-inline-start: var(--crm-border-accent) solid var(--crm-color-info);
    border-radius: var(--crm-radius-control);
    background: var(--crm-color-action-soft);
    color: var(--crm-color-text);
  }

  .crm-auth-recovery[hidden] {
    display: none;
  }

  .crm-auth-submit {
    min-block-size: var(--crm-control-min-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crm-space-2);
    padding: var(--crm-space-3) var(--crm-space-5);
    border: var(--crm-border-thin) solid var(--crm-color-action-primary);
    border-radius: var(--crm-radius-control);
    background: var(--crm-button-primary-background);
    color: var(--crm-button-primary-text);
    cursor: pointer;
    transition:
      background-color var(--crm-duration-fast) var(--crm-ease-standard),
      border-color var(--crm-duration-fast) var(--crm-ease-standard);
  }

  .crm-auth-submit:hover:not(:disabled) {
    border-color: var(--crm-button-primary-hover);
    background: var(--crm-button-primary-hover);
  }

  .crm-auth-submit:disabled {
    cursor: wait;
    opacity: 0.8;
  }

  .crm-auth-spinner {
    inline-size: var(--crm-space-4);
    block-size: var(--crm-space-4);
    display: none;
    border: var(--crm-border-thin) solid currentColor;
    border-inline-start-color: var(--crm-color-transparent);
    border-radius: 50%;
  }

  .crm-auth-submit.is-loading .crm-auth-spinner {
    display: inline-block;
    animation: crm-auth-spin calc(var(--crm-duration-standard) * 6) linear infinite;
  }

  .crm-auth-footer {
    margin-block-start: var(--crm-space-6);
    padding-block-start: var(--crm-space-4);
    border-block-start: var(--crm-border-thin) solid var(--crm-color-border);
    text-align: center;
    font-size: var(--crm-font-size-2);
  }

  .crm-auth-aside {
    min-inline-size: 0;
    display: grid;
    align-content: center;
    padding: clamp(var(--crm-space-6), 7vw, var(--crm-space-12));
    border-inline-start: var(--crm-border-thin) solid var(--crm-color-border-strong);
    background: var(--crm-auth-aside-surface);
    color: var(--crm-auth-aside-text);
  }

  .crm-auth-aside h2 {
    margin: var(--crm-space-2) var(--crm-space-0);
    color: inherit;
    font-size: var(--crm-font-size-7);
    line-height: 1.7;
  }

  .crm-auth-aside p {
    margin: var(--crm-space-0);
    color: inherit;
  }

  .crm-auth-page :is(
    .crm-auth-skip,
    .crm-auth-theme-toggle,
    .crm-auth-input,
    .crm-auth-password-toggle,
    .crm-auth-check input,
    .crm-auth-help-trigger,
    .crm-auth-submit,
    .crm-auth-alert[tabindex]
  ):focus-visible {
    outline: var(--crm-auth-focus-ring-width) solid var(--crm-auth-focus);
    outline-offset: var(--crm-space-1);
    box-shadow: 0 0 0 calc(var(--crm-auth-focus-ring-width) * 2) var(--crm-auth-focus-contrast);
  }

  @keyframes crm-auth-spin {
    to { transform: rotate(1turn); }
  }

  html[data-theme="dark"] body[id="crm-radius-system"].crm-auth-page {
    --crm-auth-focus: var(--crm-primitive-blue-100);
    --crm-auth-focus-contrast: var(--crm-primitive-ink-950);
    color-scheme: dark;
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) body[id="crm-radius-system"].crm-auth-page {
      --crm-auth-focus: var(--crm-primitive-blue-100);
      --crm-auth-focus-contrast: var(--crm-primitive-ink-950);
      color-scheme: dark;
    }
  }

  @media (max-width: 48rem) {
    .crm-auth-page--split .crm-auth-layout {
      inline-size: min(100%, 30rem);
      grid-template-columns: minmax(0, 1fr);
    }

    .crm-auth-page--split .crm-auth-aside {
      display: none;
    }
  }

  @media (max-width: 22.5rem) {
    .crm-auth-main {
      padding-inline: var(--crm-space-3);
    }

    .crm-auth-card {
      padding-inline: var(--crm-space-4);
    }

    .crm-auth-options {
      align-items: stretch;
      flex-direction: column;
    }

    .crm-auth-help-trigger {
      align-self: start;
    }
  }

  @media (max-height: 42rem) {
    .crm-auth-main {
      align-items: start;
      padding-block: var(--crm-space-6);
    }

    .crm-auth-logo {
      inline-size: 4rem;
      block-size: 4rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .crm-auth-page *,
    .crm-auth-page *::before,
    .crm-auth-page *::after {
      scroll-behavior: auto;
      transition-duration: 0.001ms;
      animation-duration: 0.001ms;
      animation-iteration-count: 1;
    }

    .crm-auth-submit.is-loading .crm-auth-spinner {
      animation: none;
      border-inline-start-color: currentColor;
    }
  }

  @media (prefers-contrast: more) {
    .crm-auth-layout,
    .crm-auth-input,
    .crm-auth-theme-toggle,
    .crm-auth-password-toggle,
    .crm-auth-alert {
      border-width: var(--crm-border-accent);
      box-shadow: none;
    }

    .crm-auth-input::placeholder {
      color: var(--crm-color-text);
    }
  }

  @media (forced-colors: active) {
    .crm-auth-page {
      --crm-auth-aside-surface: Canvas;
      --crm-auth-aside-text: CanvasText;
      --crm-auth-control-border: ButtonText;
      --crm-auth-focus: Highlight;
      --crm-auth-focus-contrast: Canvas;
    }

    .crm-auth-layout,
    .crm-auth-card,
    .crm-auth-aside,
    .crm-auth-input,
    .crm-auth-theme-toggle,
    .crm-auth-password-toggle,
    .crm-auth-submit,
    .crm-auth-alert {
      box-shadow: none;
    }

    .crm-auth-submit.is-loading .crm-auth-spinner {
      border-inline-start-color: var(--crm-color-transparent);
    }
  }

}

/* Source: assets/ui/src/patterns/login-production-parity.css */
/* Native implementation of the active production login contract.
 * Markup and visual geometry intentionally match template 2 in production;
 * all colors enter through native design-system tokens.
 */
@layer patterns {
  body.crm-route--new {
    color-scheme: light;
    --crm-login-page-current: var(--crm-login-page);
    --crm-login-page-alt-current: var(--crm-login-page-alt);
    --crm-login-surface-current: var(--crm-login-surface-glass-light);
    --crm-login-surface-solid: var(--crm-login-surface);
    --crm-login-surface-soft: var(--crm-login-surface-soft-light);
    --crm-login-text-current: var(--crm-login-text);
    --crm-login-text-secondary-current: var(--crm-login-text-secondary);
    --crm-login-text-muted-current: var(--crm-login-text-muted);
    --crm-login-border-current: var(--crm-login-border-light);
    --crm-login-input-current: var(--crm-login-field-fill-light);
    --crm-login-input-focus-current: var(--crm-login-field-focus-fill-light);
    --crm-login-input-text-current: var(--crm-login-field-text-light);
    --crm-login-input-placeholder-current: var(--crm-login-field-placeholder-light);
    --crm-login-input-border-current: var(--crm-login-field-border-light);
    --crm-login-input-border-hover-current: var(--crm-login-field-hover-border-light);
    --crm-login-input-border-focus-current: var(--crm-login-field-focus-border-light);
    --crm-login-input-shadow-current: var(--crm-login-field-shadow-light);
    --crm-login-input-focus-shadow-current: var(--crm-login-field-focus-shadow-light);
    --crm-login-input-focus-ring-current: var(--crm-login-field-focus-ring-light);
    --crm-login-shadow-current: var(--crm-login-card-shadow-light);
    --crm-login-shadow-soft-current: var(--crm-login-soft-shadow-light);
    --crm-login-focus-current: var(--crm-login-focus-halo-light);
    --crm-login-focus-outline-current: var(--crm-login-focus-light);
    --crm-login-focus-contrast-current: var(--crm-login-focus-light-contrast);
    --crm-login-danger-text-current: var(--crm-login-danger-text-light);
    --crm-login-warning-text-current: var(--crm-login-warning-text-light);
    --crm-login-grid-line-current: var(--crm-login-grid-line-light);
  }

  html[data-theme="dark"] body[id="crm-radius-system"].crm-route--new {
    color-scheme: dark;
    --crm-login-page-current: var(--crm-login-dark-page);
    --crm-login-page-alt-current: var(--crm-login-dark-page-alt);
    --crm-login-surface-current: var(--crm-login-surface-glass-dark);
    --crm-login-surface-solid: var(--crm-login-dark-surface);
    --crm-login-surface-soft: var(--crm-login-surface-soft-dark);
    --crm-login-text-current: var(--crm-login-dark-text);
    --crm-login-text-secondary-current: var(--crm-login-dark-text-secondary);
    --crm-login-text-muted-current: var(--crm-login-dark-text-muted);
    --crm-login-border-current: var(--crm-login-border-dark);
    --crm-login-input-current: var(--crm-login-field-fill-dark);
    --crm-login-input-focus-current: var(--crm-login-field-focus-fill-dark);
    --crm-login-input-text-current: var(--crm-login-field-text-dark);
    --crm-login-input-placeholder-current: var(--crm-login-field-placeholder-dark);
    --crm-login-input-border-current: var(--crm-login-field-border-dark);
    --crm-login-input-border-hover-current: var(--crm-login-field-hover-border-dark);
    --crm-login-input-border-focus-current: var(--crm-login-field-focus-border-dark);
    --crm-login-input-shadow-current: var(--crm-login-field-shadow-dark);
    --crm-login-input-focus-shadow-current: var(--crm-login-field-focus-shadow-dark);
    --crm-login-input-focus-ring-current: var(--crm-login-field-focus-ring-dark);
    --crm-login-shadow-current: var(--crm-login-card-shadow-dark);
    --crm-login-shadow-soft-current: var(--crm-login-soft-shadow-dark);
    --crm-login-focus-current: var(--crm-login-focus-halo-dark);
    --crm-login-focus-outline-current: var(--crm-login-focus-dark);
    --crm-login-focus-contrast-current: var(--crm-login-focus-dark-contrast);
    --crm-login-danger-text-current: var(--crm-login-danger-text-dark);
    --crm-login-warning-text-current: var(--crm-login-warning-text-dark);
    --crm-login-grid-line-current: var(--crm-login-grid-line-dark);
  }

  body.crm-route--new,
  body.crm-route--new *,
  body.crm-route--new *::before,
  body.crm-route--new *::after {
    box-sizing: border-box;
  }

  body.crm-route--new {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    color: var(--crm-login-text-current);
    background:
      radial-gradient(circle at 15% 15%, var(--crm-login-page-glow-cyan), transparent 28%),
      radial-gradient(circle at 84% 18%, var(--crm-login-page-glow-green), transparent 24%),
      radial-gradient(circle at 78% 82%, var(--crm-login-page-glow-blue), transparent 30%),
      linear-gradient(135deg, var(--crm-login-page-current), var(--crm-login-page-alt-current));
    font-family: var(--crm-font-body);
    font-size: 14px;
    line-height: 1.8;
    transition: background-color 280ms ease, color 280ms ease;
  }

  .crm-route--new button,
  .crm-route--new input {
    font: inherit;
  }

  .crm-route--new .login-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 28px;
    isolation: isolate;
    overflow: hidden;
  }

  .crm-route--new .login-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image:
      linear-gradient(to left, var(--crm-login-grid-line-current) 1px, transparent 1px),
      linear-gradient(to bottom, var(--crm-login-grid-line-current) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at center, black 0, transparent 74%);
  }

  .crm-route--new .login-shell::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    left: -160px;
    bottom: -180px;
    z-index: -2;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--crm-login-orb-cyan), var(--crm-login-orb-green));
    filter: blur(8px);
  }

  .crm-route--new .top-actions {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 5;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .crm-route--new .theme-toggle {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--crm-login-border-current);
    border-radius: 16px;
    color: var(--crm-login-text-current);
    background: var(--crm-login-surface-soft);
    box-shadow: var(--crm-login-shadow-soft-current);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
  }

  .crm-route--new .theme-toggle:hover {
    transform: translateY(-2px);
    border-color: var(--crm-login-hover-border);
  }

  .crm-route--new .theme-toggle:active {
    transform: translateY(0);
  }

  .crm-route--new .theme-icon {
    width: 22px;
    height: 22px;
  }

  .crm-route--new .login-layout {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: minmax(360px, 430px) 1fr;
    gap: 24px;
    align-items: stretch;
  }

  .crm-route--new .login-card,
  .crm-route--new .brand-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--crm-login-border-current);
    border-radius: 32px;
    background: var(--crm-login-surface-current);
    box-shadow: var(--crm-login-shadow-current);
    backdrop-filter: blur(24px);
  }

  .crm-route--new .login-card {
    padding: 34px;
  }

  .crm-route--new .login-card::before,
  .crm-route--new .brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(145deg, var(--crm-login-panel-shine), transparent 34%),
      linear-gradient(315deg, var(--crm-login-panel-accent), transparent 42%);
  }

  .crm-route--new .login-card > *,
  .crm-route--new .brand-panel > * {
    position: relative;
    z-index: 1;
  }

  .crm-route--new .brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 26px;
    text-align: center;
  }

  .crm-route--new .brand-mark {
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    flex: 0 0 86px;
    overflow: visible;
    background: transparent;
  }

  .crm-route--new .brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .crm-route--new .brand-copy {
    width: 100%;
    text-align: center;
  }

  .crm-route--new .brand-title {
    margin: 0;
    color: var(--crm-login-text-current);
    font-size: 22px;
    letter-spacing: -0.4px;
  }

  .crm-route--new .brand-subtitle {
    margin: 4px 0 0;
    color: var(--crm-login-text-muted-current);
    font-size: 12px;
  }

  .crm-route--new .login-alert {
    margin: 0 0 16px;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 16px;
    text-align: center;
  }

  .crm-route--new .login-alert--error {
    color: var(--crm-login-danger-text-current);
    border-color: var(--crm-login-danger-border);
    background: var(--crm-login-danger-surface);
  }

  .crm-route--new .login-alert--notice {
    color: var(--crm-login-warning-text-current);
    border-color: var(--crm-login-warning-border);
    background: var(--crm-login-warning-surface);
  }

  .crm-route--new .login-form,
  .crm-route--new .field {
    display: grid;
  }

  .crm-route--new .login-form {
    gap: 16px;
  }

  .crm-route--new .field {
    gap: 8px;
  }

  .crm-route--new .field > label {
    margin-block-end: var(--crm-login-label-margin-block-end);
    color: var(--crm-login-text-secondary-current);
    font-size: var(--crm-login-field-font-size);
  }

  .crm-route--new .login-required-marker {
    margin-inline-start: 4px;
    font: inherit;
    line-height: inherit;
    white-space: nowrap;
  }

  .crm-route--new .input-wrap {
    position: relative;
  }

  .crm-route--new .field-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 20px;
    height: 20px;
    color: var(--crm-login-text-muted-current);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .crm-route--new .login-control {
    width: 100%;
    min-height: 54px;
    padding: 0 48px 0 16px;
    border: 1px solid var(--crm-login-input-border-current);
    border-radius: var(--crm-login-field-radius);
    color: var(--crm-login-input-text-current);
    background: var(--crm-login-input-current);
    box-shadow: var(--crm-login-input-shadow-current);
    font-size: var(--crm-login-field-font-size);
    transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
  }

  .crm-route--new .login-control:hover {
    border-color: var(--crm-login-input-border-hover-current);
  }

  .crm-route--new .login-control:focus {
    border-color: var(--crm-login-input-border-focus-current);
    background: var(--crm-login-input-focus-current);
    box-shadow: var(--crm-login-input-focus-shadow-current);
  }

  .crm-route--new .login-control:focus-visible {
    outline: 3px solid var(--crm-login-focus-outline-current);
    outline-offset: 2px;
    box-shadow: var(--crm-login-input-focus-ring-current);
  }

  .crm-route--new .login-control:-webkit-autofill,
  .crm-route--new .login-control:-webkit-autofill:hover,
  .crm-route--new .login-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--crm-login-input-text-current);
    caret-color: var(--crm-login-input-text-current);
    -webkit-box-shadow: 0 0 0 1000px var(--crm-login-input-current) inset;
    box-shadow: 0 0 0 1000px var(--crm-login-input-current) inset;
  }

  .crm-route--new .login-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--crm-login-input-text-current);
    caret-color: var(--crm-login-input-text-current);
    border-color: var(--crm-login-input-border-focus-current);
    -webkit-box-shadow: 0 0 0 1000px var(--crm-login-input-focus-current) inset;
    box-shadow:
      0 0 0 1000px var(--crm-login-input-focus-current) inset,
      var(--crm-login-input-focus-ring-current);
  }

  .crm-route--new #password {
    padding-inline: 48px;
  }

  .crm-route--new .password-toggle {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 13px;
    color: var(--crm-login-text-muted-current);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 200ms ease, color 200ms ease;
  }

  .crm-route--new .password-toggle:hover {
    color: var(--crm-login-text-current);
    background: var(--crm-login-control-hover);
  }

  .crm-route--new .password-toggle svg {
    width: 20px;
    height: 20px;
  }

  .crm-route--new .form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
  }

  .crm-route--new .login-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--crm-login-text-secondary-current);
    font-size: 13px;
    margin-block-end: var(--crm-login-label-margin-block-end);
    cursor: pointer;
    user-select: none;
  }

  .crm-route--new .login-check-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .crm-route--new .login-check-helper {
    color: var(--crm-login-text-muted-current);
    font-size: var(--crm-font-size-1);
  }

  .crm-route--new .login-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .crm-route--new .check-box {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--crm-login-input-border-current);
    border-radius: 8px;
    background: var(--crm-login-input-current);
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  }

  .crm-route--new .check-box svg {
    width: 15px;
    height: 15px;
    color: var(--crm-login-on-accent);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .crm-route--new .login-check input:checked + .check-box {
    border-color: var(--crm-login-accent);
    background: linear-gradient(135deg, var(--crm-login-accent), var(--crm-login-accent-strong));
    box-shadow: var(--crm-login-check-shadow);
  }

  .crm-route--new .login-check input:checked + .check-box svg {
    opacity: 1;
    transform: scale(1);
  }

  .crm-route--new .submit-btn {
    position: relative;
    width: 100%;
    min-height: 56px;
    margin-top: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 19px;
    color: var(--crm-login-on-accent);
    background:
      linear-gradient(135deg, var(--crm-login-button-highlight), transparent 32%),
      linear-gradient(135deg, var(--crm-login-accent), var(--crm-login-accent-strong));
    box-shadow: var(--crm-login-button-shadow);
    cursor: pointer;
    font-size: 14px;
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
  }

  .crm-route--new .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--crm-login-button-shadow-hover);
    filter: saturate(1.08);
  }

  .crm-route--new .submit-btn:active {
    transform: translateY(0);
  }

  .crm-route--new .submit-btn.is-loading {
    pointer-events: none;
    opacity: 0.88;
  }

  .crm-route--new .submit-btn.is-loading .btn-text {
    opacity: 0;
  }

  .crm-route--new .submit-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    width: 22px;
    height: 22px;
    margin: -11px -11px 0 0;
    border: 3px solid var(--crm-login-spinner-track);
    border-top-color: var(--crm-login-on-accent);
    border-radius: 999px;
    animation: crm-login-spin 800ms linear infinite;
  }

  .crm-route--new .login-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--crm-login-border-current);
    color: var(--crm-login-text-muted-current);
    text-align: center;
    font-size: 12px;
  }

  .crm-route--new .brand-panel {
    min-height: 560px;
    padding: 40px;
    display: grid;
    place-items: center;
    text-align: center;
    background:
      linear-gradient(135deg, var(--crm-login-panel-glow-cyan), transparent 40%),
      linear-gradient(315deg, var(--crm-login-panel-glow-green), transparent 38%),
      var(--crm-login-surface-current);
  }

  .crm-route--new .brand-panel-main {
    display: grid;
    gap: 20px;
    width: 100%;
    min-width: 0;
    max-width: 560px;
  }

  .crm-route--new .brand-panel h2 {
    max-width: 100%;
    margin: 0;
    color: var(--crm-login-text-current);
    font-size: clamp(18px, 2.35vw, var(--crm-login-panel-heading-max));
    line-height: 1.55;
    letter-spacing: -0.7px;
    overflow-wrap: anywhere;
    white-space: normal;
    text-wrap: balance;
  }

  .crm-route--new .login-skip-link {
    position: fixed;
    z-index: 1000;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    padding: 9px 14px;
    border: 2px solid var(--crm-login-skip-border);
    border-radius: 8px;
    color: var(--crm-login-skip-text);
    background: var(--crm-login-skip-background);
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform 160ms ease;
  }

  .crm-route--new .login-skip-link:focus-visible {
    outline: 3px solid var(--crm-login-focus-outline-current);
    outline-offset: 2px;
    transform: translateY(0);
  }

  .crm-route--new :is(.theme-toggle, .password-toggle):focus-visible,
  .crm-route--new .login-check input:focus-visible + .check-box {
    outline: 3px solid var(--crm-login-focus-outline-current);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--crm-login-focus-contrast-current);
  }

  .crm-route--new .submit-btn:focus-visible {
    outline: 3px solid var(--crm-login-focus-outline-current);
    outline-offset: 3px;
    box-shadow:
      0 0 0 3px var(--crm-login-focus-contrast-current),
      0 0 0 6px var(--crm-login-focus-outline-current);
  }

  @keyframes crm-login-spin {
    to { transform: rotate(360deg); }
  }

  @media (max-width: 960px) {
    .crm-route--new .login-layout {
      grid-template-columns: 1fr;
      max-width: 480px;
    }

    .crm-route--new .brand-panel {
      display: none;
    }
  }

  @media (max-width: 560px) {
    .crm-route--new .login-shell {
      align-items: stretch;
      padding: 18px;
    }

    .crm-route--new .top-actions {
      top: 14px;
      left: 14px;
    }

    .crm-route--new .theme-toggle {
      width: 42px;
      height: 42px;
      border-radius: 14px;
    }

    .crm-route--new .login-layout {
      align-self: center;
    }

    .crm-route--new .login-card {
      padding: 24px 18px;
      border-radius: 26px;
    }

    .crm-route--new .brand {
      margin-top: 24px;
      margin-bottom: 22px;
    }

    .crm-route--new .brand-mark {
      width: 76px;
      height: 76px;
      flex-basis: 76px;
    }

    .crm-route--new .login-control {
      min-height: 52px;
      border-radius: var(--crm-login-field-radius);
    }

    .crm-route--new .submit-btn {
      min-height: 54px;
      border-radius: 17px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .crm-route--new *,
    .crm-route--new *::before,
    .crm-route--new *::after {
      scroll-behavior: auto;
      animation-duration: 0.001ms;
      animation-iteration-count: 1;
      transition-duration: 0.001ms;
    }

  }

  @media (forced-colors: active) {
    .crm-route--new :is(.login-skip-link, .theme-toggle, .password-toggle, .submit-btn, .login-control):focus-visible,
    .crm-route--new .login-check input:focus-visible + .check-box {
      outline: 3px solid Highlight;
      box-shadow: none;
    }
  }
}