/* GENERATED FILE — do not edit. Canonical source: recworks-site/assets/cwc-family-tokens.css.
   Edit there, then run scripts/sync-tokens.sh here to refresh this copy. */
/* CWC Family shared tokens — CANONICAL. Edit here only. cwc-site copies this file via scripts/sync-tokens.sh. */
/* Source: cwc-family-tokens.json (CWC Family design system, extracted from live recworks.co, October 2026). */

:root {
  /* Color — paper */
  --paper-100: #faf6ef; /* Panel surface: every content panel inside the frame. Default ground for text. */
  --paper-200: #f2ebe1; /* Page ground behind the frame and panels. */
  --paper-300: #ebe0d3; /* Recessed fills on paper: table stripes, input wells, hover on paper rows. */
  --white: #ffffff;     /* Text on brand-500 buttons; rare pure-white fills (inputs). */

  /* Color — plum */
  --plum-900: #3a1a33;  /* Deepest plum: cookie banner, footer bar on dark, pressed plum buttons. */
  --plum-800: #4a2545;  /* THE ink. Headlines, body links, card and frame strokes, inverted panels. */
  --plum-600: #5c4a57;  /* Body copy on paper (7.6:1). */
  --plum-500: #725f6c;  /* Muted text on paper: captions, footnotes, meta lines (5.5:1). */
  --plum-300: #c9a6c0;  /* Eyebrows and labels on plum-800 (5.9:1). Never on paper. */
  --plum-200: #dcc9d6;  /* Skeleton bars and placeholder strokes in illustrations. */
  --plum-100: #e3d3dd;  /* Body copy on plum-800 panels (8.9:1). */
  --cream: #f7f0ea;     /* Headlines and card strokes on plum-800 panels (11.3:1). */

  /* Color — brand */
  --brand-500: #c8327d; /* Magenta. Primary button fill, headline accent, badge discs, bullet dots. */
  --brand-600: #a62766; /* Magenta text on paper at any size (6.3:1). Hover for brand-500 buttons. */
  --brand-400: #e85aa0; /* Bright magenta strokes/offset shadows on plum-800. Not for text. */
  --brand-100: #f7c9e1; /* Text selection highlight; soft tint behind tags. */

  /* Color — lines */
  --line-strong: var(--plum-800); /* 2px card and step-number strokes; 1.5px frame outline. */
  --line-soft: #ddd0d8;           /* 1.5px dividers between list rows and steps. Decorative only. */
  --line-accent: #e799c4;         /* 1px hairline rule above the hero meta row. */
  --focus: var(--brand-600);      /* 2px focus ring, offset 3px, on any interactive element. */

  /* Type families */
  --font-display: Poppins, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: Inter, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing */
  --space-1: 6px;  /* Offset of the button outline; icon-to-text gap in tags. */
  --space-2: 10px; /* Nav button vertical padding; small gaps. */
  --space-3: 14px; /* Primary button vertical padding; title-to-body gap in steps. */
  --space-4: 22px; /* Frame padding (frame edge to panel); gap between stacked panels. */
  --space-5: 26px; /* Card grid gap; step side padding. */
  --space-6: 34px; /* Page padding around the frame (12px under 700px). */
  --space-7: 48px; /* Panel side padding; two-column gap. */
  --space-8: 72px; /* Space between major blocks inside a panel. */

  /* Radius */
  --radius-xs: 3px;   /* Buttons and their offset outline. Buttons are never pills. */
  --radius-sm: 8px;   /* Feature, pricing and list cards. */
  --radius-md: 10px;  /* Step rows and their active fill. */
  --radius-lg: 14px;  /* Content panels. */
  --radius-xl: 22px;  /* The outer frame that holds all panels. */
  --radius-full: 50%; /* Badge discs, step numbers, bullet dots. */

  /* Stroke */
  --stroke-hair: 1px;   /* Accent rule above meta rows. */
  --stroke-thin: 1.5px; /* Frame, offset outline, row dividers, text-link underline. */
  --stroke-bold: 2px;   /* Cards, step numbers, eyebrow underline. */

  /* Shadow — RecWorks draws with lines, not shadows. */
  --shadow-offset: 6px 6px 0 0 var(--plum-800);        /* Hard offset block behind a featured card on paper. */
  --shadow-offset-accent: 6px 6px 0 0 var(--brand-400); /* Featured pricing card on a plum-800 panel. */
}