/* Reference only. Review within the existing app before applying. */
:root {
  --cfs-violet: #70549A;
  --cfs-rose: #C784A2;
  --cfs-ink: #202024;
  --cfs-paper: #FFFFFF;
  --cfs-tint: #F7F5FA;
  --cfs-font: "Poppins", sans-serif;
  --cfs-body-font: "Manrope", sans-serif;
  --cfs-weight-body: 400;
  --cfs-weight-heading: 700;
  --cfs-motion-duration: 180ms;
}
/* Scope classes to the brand area. Do not blanket override an existing site. */
.cfs-body { color: var(--cfs-ink); background: var(--cfs-paper); font-family: var(--cfs-body-font); font-weight: 400; }
.cfs-button { color: var(--cfs-paper); background: var(--cfs-violet); }
.cfs-button:focus-visible { box-shadow: 0 0 0 3px #FFFFFF; outline: 3px solid var(--cfs-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .cfs-motion { animation: none !important; transition: none !important; transform: none !important; }
}

/* Digital system extension v1.1. Existing token names are preserved.
   Semantic colors communicate status, not decorative brand accents. */
:root {
  --cfs-violet-hover: #5D437F;
  --cfs-violet-active: #4E366D;
  --cfs-border: #766F7E;
  --cfs-separator: #DDD7E5;
  --cfs-text-muted: #625E69;
  --cfs-disabled-bg: #E7E3EC;
  --cfs-focus: #202024;
  --cfs-focus-gap: #FFFFFF;
  --cfs-space-1: 4px;
  --cfs-space-2: 8px;
  --cfs-space-3: 12px;
  --cfs-space-4: 16px;
  --cfs-space-6: 24px;
  --cfs-space-8: 32px;
  --cfs-space-12: 48px;
  --cfs-space-16: 64px;
  --cfs-space-24: 96px;
  --cfs-radius-control: 6px;
  --cfs-radius-surface: 12px;
  --cfs-content-max: 1200px;
  --cfs-reading-max: 65ch;
  --cfs-control-min: 44px;
  --cfs-icon-size: 24px;
  --cfs-icon-stroke: 1.75;
  --cfs-shadow-overlay: 0 8px 24px rgb(32 32 36 / 12%);
  --cfs-type-app-title: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --cfs-type-marketing-title: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --cfs-type-body: 1rem;
  --cfs-type-marketing-body: 1.125rem;
  --cfs-type-label: 0.875rem;
  --cfs-leading-body: 1.5;
  --cfs-leading-heading: 1.2;
  --cfs-success: #236443;
  --cfs-success-bg: #EDF6F0;
  --cfs-warning: #805300;
  --cfs-warning-bg: #FFF5DD;
  --cfs-error: #A13243;
  --cfs-error-bg: #FFF0F2;
  --cfs-info: #275D8A;
  --cfs-info-bg: #EDF4FA;
}
/* Required implementation behavior, not an application component library:
   Use a white separation gap plus the ink outline for focus on dark surfaces.
   Keep disabled reasons visible. Loading keeps its label and prevents duplicate submission.
   Labels and errors must be programmatically linked to their inputs.
   Prefer reduced motion: static progress text instead of a spinner.
   44 px is this kit's recommended target size, not a claim of universal WCAG compliance.
   Separator is decorative only. Use border for boundaries required to identify controls.
*/