/*!
 * SAP Signum -- CSS custom properties
 * Version 5.0.0 | generated 20260929
 *
 * GENERATED FILE. DO NOT EDIT.
 * Source of truth: 10-foundations/tokens/*.json
 * Regenerate:      node 10-foundations/build/signum-build.mjs
 *
 * Smile America Partners
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: light;

  /* ---- Colour primitives ---- */

  --color-cyan-0: #F0FAFF;
  --color-cyan-10: #D4F1FE;
  --color-cyan-20: #B9E8FD;
  --color-cyan-30: #7DD4F8;
  --color-cyan-40: #3DBDEF;
  --color-cyan-50: #0097CE;
  --color-cyan-60: #078ECC;
  --color-cyan-70: #056F9F;
  --color-cyan-80: #045680;
  --color-cyan-90: #033D5C;
  --color-cyan-100: #012638;
  --color-neutral-0: #FFFFFF;
  --color-neutral-5: #F5F7F9;
  --color-neutral-10: #EDEEF0;
  --color-neutral-20: #D5D8DC;
  --color-neutral-30: #B8BCC4;
  --color-neutral-40: #979DAA;
  --color-neutral-50: #868E9A;
  --color-neutral-60: #6B7280;
  --color-neutral-70: #4D545F;
  --color-neutral-80: #3A4049;
  --color-neutral-90: #323842;
  --color-neutral-100: #1A1E24;
  --color-red-0: #FFF5F5;
  --color-red-10: #FEE2E4;
  --color-red-20: #FDB5BA;
  --color-red-30: #F98A92;
  --color-red-40: #F04351;
  --color-red-50: #DC2D3C;
  --color-red-60: #B91C29;
  --color-red-70: #8E1520;
  --color-red-80: #640E16;
  --color-red-90: #3C080D;
  --color-green-0: #ECFDF5;
  --color-green-10: #D1FAE5;
  --color-green-20: #A7F3D0;
  --color-green-30: #6EE7B7;
  --color-green-40: #34D399;
  --color-green-50: #10B981;
  --color-green-60: #059669;
  --color-green-70: #047857;
  --color-green-80: #065F46;
  --color-green-90: #064E3B;
  --color-green-100: #022C22;
  --color-amber-0: #FFFBEB;
  --color-amber-10: #FEF3C7;
  --color-amber-20: #FDE68A;
  --color-amber-30: #FCD34D;
  --color-amber-40: #FBBF24;
  --color-amber-50: #F59E0B;
  --color-amber-60: #D97706;
  --color-amber-70: #B45309;
  --color-amber-80: #92400E;
  --color-amber-90: #78350F;
  --color-amber-100: #451A03;
  --color-blue-0: #EFF6FF;
  --color-blue-10: #DBEAFE;
  --color-blue-20: #BFDBFE;
  --color-blue-30: #93C5FD;
  --color-blue-40: #60A5FA;
  --color-blue-50: #3B82F6;
  --color-blue-60: #2563EB;
  --color-blue-70: #1D4ED8;
  --color-blue-80: #1E40AF;
  --color-blue-90: #1E3A8A;
  --color-blue-100: #172554;

  /* ---- Typography ---- */

  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, 'Cascadia Code', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-display: 3rem;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.875rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1.125rem;
  --font-size-h6: 1rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-subtitle: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-size-meta: 0.6875rem;
  --line-height-tight: 1.2;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ---- Spacing ---- */

  --space-none: 0px;
  --space-xxs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.25rem;
  --space-2xl: 1.5rem;
  --space-3xl: 2rem;
  --space-4xl: 2.5rem;
  --space-5xl: 3rem;
  --space-6xl: 4rem;

  /* ---- Radius ---- */

  --radius-none: 0px;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 30px;
  --radius-full: 999px;

  /* ---- Stroke ---- */

  --stroke-xs: 0.5px;
  --stroke-sm: 1px;
  --stroke-md: 2px;
  --stroke-lg: 4px;

  /* ---- Shadow ---- */

  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(50, 56, 66, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(50, 56, 66, 0.1), 0 1px 2px -1px rgba(50, 56, 66, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(50, 56, 66, 0.1), 0 2px 4px -2px rgba(50, 56, 66, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(50, 56, 66, 0.1), 0 4px 6px -4px rgba(50, 56, 66, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(50, 56, 66, 0.1), 0 8px 10px -6px rgba(50, 56, 66, 0.1);

  /* ---- Motion ---- */

  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --duration-deliberate: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-linear: linear;
  --motion-distance-sm: 4px;
  --motion-distance-md: 8px;
  --motion-distance-lg: 16px;

  /* ---- Breakpoints ---- */

  --breakpoint-xs: 0px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-xxl: 1536px;

  /* ---- Stacking ---- */

  --z-base: 0;
  --z-raised: 100;
  --z-sticky-section: 10;
  --z-sticky-toolbar: 20;
  --z-sticky-bar: 30;
  --z-dropdown: 400;
  --z-popover: 500;
  --z-tooltip: 600;
  --z-drawer-backdrop: 700;
  --z-drawer: 710;
  --z-modal-backdrop: 800;
  --z-modal: 810;
  --z-toast: 900;
  --z-dev-overlay: 9999;

  /* ---- Layout ---- */

  --container-max-width: 1200px;

  /* ---- Semantic tokens (light) ---- */

  --bg-neutral-primary: var(--color-neutral-0);
  --bg-neutral-secondary: var(--color-neutral-5);
  --bg-neutral-tertiary: var(--color-neutral-10);
  --bg-neutral-disabled: var(--color-neutral-10);
  --bg-brand-primary: var(--color-cyan-70);
  --bg-brand-subtle: var(--color-cyan-10);
  --bg-brand-bold: var(--color-cyan-80);
  --bg-error-subtle: var(--color-red-10);
  --bg-error-bold: var(--color-red-60);
  --bg-success-subtle: var(--color-green-10);
  --bg-success-bold: var(--color-green-50);
  --bg-warning-subtle: var(--color-amber-10);
  --bg-warning-bold: var(--color-amber-50);
  --bg-info-subtle: var(--color-blue-10);
  --bg-info-bold: var(--color-blue-50);
  --bg-table-header: var(--color-cyan-20);
  --bg-input: var(--color-neutral-5);
  --bg-brand-hover: var(--color-cyan-80);
  --bg-success-hover: var(--color-green-60);
  --bg-error-hover: var(--color-red-70);
  --bg-warning-hover: var(--color-amber-60);
  --bg-neutral-hover: var(--color-neutral-20);
  --bg-brand-ghost: rgba(7, 142, 204, 0.08);
  --bg-brand-ghost-subtle: rgba(7, 142, 204, 0.05);
  --bg-error-tint: rgba(185, 28, 41, 0.08);
  --bg-canvas: var(--color-neutral-0);
  --bg-neutral-subtle: var(--color-neutral-5);
  --bg-brand-subtle-hover: var(--color-cyan-20);
  --bg-brand-primary-hover: var(--color-cyan-80);
  --bg-danger-subtle: var(--color-red-10);
  --bg-overlay-backdrop: rgba(0, 0, 0, 0.4);
  --text-neutral-primary: var(--color-neutral-90);
  --text-neutral-secondary: var(--color-neutral-60);
  --text-neutral-tertiary: var(--color-neutral-60);
  --text-neutral-disabled: var(--color-neutral-30);
  --text-neutral-inverse: var(--color-neutral-0);
  --text-brand-primary: var(--color-cyan-70);
  --text-brand-secondary: var(--color-cyan-80);
  --text-error-primary: var(--color-red-60);
  --text-success-primary: var(--color-green-70);
  --text-warning-primary: var(--color-amber-70);
  --text-info-primary: var(--color-blue-60);
  --text-meta: var(--color-neutral-60);
  --text-danger-primary: var(--color-red-60);
  --text-on-brand: var(--color-neutral-0);
  --text-on-error-bold: var(--color-neutral-0);
  --icon-neutral-primary: var(--color-neutral-70);
  --icon-neutral-secondary: var(--color-neutral-50);
  --icon-neutral-disabled: var(--color-neutral-30);
  --icon-neutral-inverse: var(--color-neutral-0);
  --icon-brand-primary: var(--color-cyan-60);
  --icon-error-primary: var(--color-red-60);
  --icon-success-primary: var(--color-green-60);
  --icon-warning-primary: var(--color-amber-60);
  --icon-info-primary: var(--color-blue-50);
  --border-neutral-primary: var(--color-neutral-20);
  --border-neutral-secondary: var(--color-neutral-10);
  --border-neutral-strong: var(--color-neutral-50);
  --border-brand-primary: var(--color-cyan-60);
  --border-brand-subtle: var(--color-cyan-20);
  --border-error-primary: var(--color-red-60);
  --border-success-primary: var(--color-green-50);
  --border-warning-primary: var(--color-amber-50);
  --border-info-primary: var(--color-blue-50);
  --border-brand-focus: var(--color-cyan-60);
  --border-error-focus: var(--color-red-60);
  --border-brand-ring: rgba(7, 142, 204, 0.15);
  --border-error-ring: rgba(185, 28, 41, 0.10);
  --border-error-tint: rgba(185, 28, 41, 0.30);
  --border-warning-tint: rgba(245, 158, 11, 0.30);
  --border-success-tint: rgba(16, 185, 129, 0.30);
  --border-danger: var(--color-red-60);
  --border-neutral-low: var(--color-neutral-10);
  --border-neutral-medium: var(--color-neutral-30);
  --surface-base: var(--color-neutral-0);
  --surface-raised: var(--color-neutral-0);
  --surface-overlay: var(--color-neutral-0);
  --focus-ring: 2px solid var(--color-cyan-60);
  --focus-ring-offset: 2px;

  /* ---- Accessibility remediation (additive, opt-in) ---- */
  /* AA-compliant alternatives for the tokens the build's contrast gate
     fails. Adopting one is a visual decision -- see
     50-governance/audits/accessibility-defects-20260801.md. */

  --text-neutral-tertiary-aa: var(--color-neutral-60);
  --text-meta-aa: var(--color-neutral-60);
  --text-brand-primary-aa: var(--color-cyan-70);
  --text-success-primary-aa: var(--color-green-70);
  --text-warning-primary-aa: var(--color-amber-70);
  --text-on-brand-aa: var(--color-neutral-0);
  --bg-brand-primary-aa: var(--color-cyan-70);
  --bg-brand-hover-aa: var(--color-cyan-80);
  --icon-success-primary-aa: var(--color-green-60);
  --icon-warning-primary-aa: var(--color-amber-60);

  /* ---- Deprecated aliases (pattern catalog, 20260526) ---- */
  /* Retained for consumer compatibility. New work uses the canonical
     --font-size-*, --font-weight-*, and --line-height-* tokens above. */

  --text-body-size: var(--font-size-body);
  --text-body-line-height: var(--line-height-normal);
  --text-caption-size: var(--font-size-caption);
  --text-caption-weight: var(--font-weight-semibold);
  --text-button-weight: var(--font-weight-medium);
  --text-heading-sm-weight: var(--font-weight-semibold);
  --text-heading-md-size: var(--font-size-h4);
  --text-heading-md-weight: var(--font-weight-semibold);
  --text-heading-lg-size: var(--font-size-h2);
  --text-heading-lg-weight: var(--font-weight-semibold);
}


/* ---- Dark mode ---- */
/* Two selectors on purpose: the media query honours the OS preference, the
   attribute lets a product ship an explicit user-facing theme switch. A product
   that offers a switch should set data-signum-theme on <html> and the attribute
   rule wins by specificity. Both blocks declare color-scheme: dark, so native
   controls, dropdown lists, and scrollbars follow the active theme too. */

@media (prefers-color-scheme: dark) {
  :root:not([data-signum-theme='light']) {
    color-scheme: dark;

    --bg-neutral-primary: var(--color-neutral-100);
    --bg-neutral-secondary: var(--color-neutral-90);
    --bg-neutral-tertiary: var(--color-neutral-80);
    --bg-neutral-disabled: var(--color-neutral-90);
    --bg-brand-primary: var(--color-cyan-40);
    --bg-brand-subtle: var(--color-cyan-90);
    --bg-brand-bold: var(--color-cyan-30);
    --bg-error-subtle: var(--color-red-80);
    --bg-error-bold: var(--color-red-50);
    --bg-success-subtle: var(--color-green-80);
    --bg-success-bold: var(--color-green-50);
    --bg-warning-subtle: var(--color-amber-80);
    --bg-warning-bold: var(--color-amber-50);
    --bg-info-subtle: var(--color-blue-80);
    --bg-info-bold: var(--color-blue-50);
    --bg-table-header: var(--color-cyan-90);
    --bg-input: var(--color-neutral-80);
    --bg-brand-hover: var(--color-cyan-30);
    --bg-success-hover: var(--color-green-40);
    --bg-error-hover: var(--color-red-30);
    --bg-warning-hover: var(--color-amber-40);
    --bg-neutral-hover: var(--color-neutral-70);
    --bg-brand-ghost: rgba(7, 142, 204, 0.15);
    --bg-brand-ghost-subtle: rgba(7, 142, 204, 0.10);
    --bg-error-tint: rgba(220, 45, 60, 0.15);
    --bg-canvas: var(--color-neutral-100);
    --bg-neutral-subtle: var(--color-neutral-90);
    --bg-brand-subtle-hover: var(--color-cyan-80);
    --bg-brand-primary-hover: var(--color-cyan-30);
    --bg-danger-subtle: var(--color-red-80);
    --bg-overlay-backdrop: rgba(0, 0, 0, 0.4);
    --text-neutral-primary: var(--color-neutral-5);
    --text-neutral-secondary: var(--color-neutral-40);
    --text-neutral-tertiary: var(--color-neutral-50);
    --text-neutral-disabled: var(--color-neutral-70);
    --text-neutral-inverse: var(--color-neutral-100);
    --text-brand-primary: var(--color-cyan-30);
    --text-brand-secondary: var(--color-cyan-20);
    --text-error-primary: var(--color-red-30);
    --text-success-primary: var(--color-green-30);
    --text-warning-primary: var(--color-amber-30);
    --text-info-primary: var(--color-blue-30);
    --text-meta: var(--color-neutral-50);
    --text-danger-primary: var(--color-red-30);
    --text-on-brand: var(--color-neutral-100);
    --text-on-error-bold: var(--color-neutral-0);
    --icon-neutral-primary: var(--color-neutral-30);
    --icon-neutral-secondary: var(--color-neutral-50);
    --icon-neutral-disabled: var(--color-neutral-70);
    --icon-neutral-inverse: var(--color-neutral-100);
    --icon-brand-primary: var(--color-cyan-30);
    --icon-error-primary: var(--color-red-30);
    --icon-success-primary: var(--color-green-30);
    --icon-warning-primary: var(--color-amber-30);
    --icon-info-primary: var(--color-blue-30);
    --border-neutral-primary: var(--color-neutral-70);
    --border-neutral-secondary: var(--color-neutral-80);
    --border-neutral-strong: var(--color-neutral-50);
    --border-brand-primary: var(--color-cyan-40);
    --border-brand-subtle: var(--color-cyan-80);
    --border-error-primary: var(--color-red-50);
    --border-success-primary: var(--color-green-40);
    --border-warning-primary: var(--color-amber-40);
    --border-info-primary: var(--color-blue-40);
    --border-brand-focus: var(--color-cyan-40);
    --border-error-focus: var(--color-red-50);
    --border-brand-ring: rgba(7, 142, 204, 0.30);
    --border-error-ring: rgba(220, 45, 60, 0.20);
    --border-error-tint: rgba(220, 45, 60, 0.45);
    --border-warning-tint: rgba(245, 158, 11, 0.45);
    --border-success-tint: rgba(16, 185, 129, 0.45);
    --border-danger: var(--color-red-50);
    --border-neutral-low: var(--color-neutral-80);
    --border-neutral-medium: var(--color-neutral-70);
    --surface-base: var(--color-neutral-100);
    --surface-raised: var(--color-neutral-90);
    --surface-overlay: var(--color-neutral-80);
    --focus-ring: 2px solid var(--color-cyan-40);

    /* Accessibility remediation, dark */
    --text-neutral-tertiary-aa: var(--color-neutral-50);
    --text-meta-aa: var(--color-neutral-50);
    --text-brand-primary-aa: var(--color-cyan-30);
    --text-success-primary-aa: var(--color-green-30);
    --text-warning-primary-aa: var(--color-amber-30);
    --text-on-brand-aa: var(--color-neutral-100);
    --bg-brand-primary-aa: var(--color-cyan-40);
    --bg-brand-hover-aa: var(--color-cyan-30);
    --icon-success-primary-aa: var(--color-green-30);
    --icon-warning-primary-aa: var(--color-amber-30);
  }
}

[data-signum-theme='dark'] {
    color-scheme: dark;

    --bg-neutral-primary: var(--color-neutral-100);
    --bg-neutral-secondary: var(--color-neutral-90);
    --bg-neutral-tertiary: var(--color-neutral-80);
    --bg-neutral-disabled: var(--color-neutral-90);
    --bg-brand-primary: var(--color-cyan-40);
    --bg-brand-subtle: var(--color-cyan-90);
    --bg-brand-bold: var(--color-cyan-30);
    --bg-error-subtle: var(--color-red-80);
    --bg-error-bold: var(--color-red-50);
    --bg-success-subtle: var(--color-green-80);
    --bg-success-bold: var(--color-green-50);
    --bg-warning-subtle: var(--color-amber-80);
    --bg-warning-bold: var(--color-amber-50);
    --bg-info-subtle: var(--color-blue-80);
    --bg-info-bold: var(--color-blue-50);
    --bg-table-header: var(--color-cyan-90);
    --bg-input: var(--color-neutral-80);
    --bg-brand-hover: var(--color-cyan-30);
    --bg-success-hover: var(--color-green-40);
    --bg-error-hover: var(--color-red-30);
    --bg-warning-hover: var(--color-amber-40);
    --bg-neutral-hover: var(--color-neutral-70);
    --bg-brand-ghost: rgba(7, 142, 204, 0.15);
    --bg-brand-ghost-subtle: rgba(7, 142, 204, 0.10);
    --bg-error-tint: rgba(220, 45, 60, 0.15);
    --bg-canvas: var(--color-neutral-100);
    --bg-neutral-subtle: var(--color-neutral-90);
    --bg-brand-subtle-hover: var(--color-cyan-80);
    --bg-brand-primary-hover: var(--color-cyan-30);
    --bg-danger-subtle: var(--color-red-80);
    --bg-overlay-backdrop: rgba(0, 0, 0, 0.4);
    --text-neutral-primary: var(--color-neutral-5);
    --text-neutral-secondary: var(--color-neutral-40);
    --text-neutral-tertiary: var(--color-neutral-50);
    --text-neutral-disabled: var(--color-neutral-70);
    --text-neutral-inverse: var(--color-neutral-100);
    --text-brand-primary: var(--color-cyan-30);
    --text-brand-secondary: var(--color-cyan-20);
    --text-error-primary: var(--color-red-30);
    --text-success-primary: var(--color-green-30);
    --text-warning-primary: var(--color-amber-30);
    --text-info-primary: var(--color-blue-30);
    --text-meta: var(--color-neutral-50);
    --text-danger-primary: var(--color-red-30);
    --text-on-brand: var(--color-neutral-100);
    --text-on-error-bold: var(--color-neutral-0);
    --icon-neutral-primary: var(--color-neutral-30);
    --icon-neutral-secondary: var(--color-neutral-50);
    --icon-neutral-disabled: var(--color-neutral-70);
    --icon-neutral-inverse: var(--color-neutral-100);
    --icon-brand-primary: var(--color-cyan-30);
    --icon-error-primary: var(--color-red-30);
    --icon-success-primary: var(--color-green-30);
    --icon-warning-primary: var(--color-amber-30);
    --icon-info-primary: var(--color-blue-30);
    --border-neutral-primary: var(--color-neutral-70);
    --border-neutral-secondary: var(--color-neutral-80);
    --border-neutral-strong: var(--color-neutral-50);
    --border-brand-primary: var(--color-cyan-40);
    --border-brand-subtle: var(--color-cyan-80);
    --border-error-primary: var(--color-red-50);
    --border-success-primary: var(--color-green-40);
    --border-warning-primary: var(--color-amber-40);
    --border-info-primary: var(--color-blue-40);
    --border-brand-focus: var(--color-cyan-40);
    --border-error-focus: var(--color-red-50);
    --border-brand-ring: rgba(7, 142, 204, 0.30);
    --border-error-ring: rgba(220, 45, 60, 0.20);
    --border-error-tint: rgba(220, 45, 60, 0.45);
    --border-warning-tint: rgba(245, 158, 11, 0.45);
    --border-success-tint: rgba(16, 185, 129, 0.45);
    --border-danger: var(--color-red-50);
    --border-neutral-low: var(--color-neutral-80);
    --border-neutral-medium: var(--color-neutral-70);
    --surface-base: var(--color-neutral-100);
    --surface-raised: var(--color-neutral-90);
    --surface-overlay: var(--color-neutral-80);
    --focus-ring: 2px solid var(--color-cyan-40);

    /* Accessibility remediation, dark */
    --text-neutral-tertiary-aa: var(--color-neutral-50);
    --text-meta-aa: var(--color-neutral-50);
    --text-brand-primary-aa: var(--color-cyan-30);
    --text-success-primary-aa: var(--color-green-30);
    --text-warning-primary-aa: var(--color-amber-30);
    --text-on-brand-aa: var(--color-neutral-100);
    --bg-brand-primary-aa: var(--color-cyan-40);
    --bg-brand-hover-aa: var(--color-cyan-30);
    --icon-success-primary-aa: var(--color-green-30);
    --icon-warning-primary-aa: var(--color-amber-30);
}


/* ---- Reduced motion ---- */
/* Principle V5. Honoured centrally so no consumer has to remember. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-deliberate: 0ms;
  }
}