/* GENERATED — do not edit. Run `npm run gen` in packages/tokens.
 * Source: contracts/design/tokens.v1.json
 * Source-SHA256: 471b084d2442596ad5429a5782711fb27bb73a130383d916ad65d593a7b8d76b
 * Body-SHA256: 950bc541dc2bd9f34909d8f08eeff335506a7f32abff7ef7c4c91e47822eb992
 * 127 custom properties across 11 group(s).
 * 3 token(s) in breakpoint are NOT emitted: a breakpoint cannot be a
 * custom property, because @media does not resolve var().
 *
 * ONE <link> IS THE WHOLE INTEGRATION. No build step, no package manager,
 * works from file://. That is the point: dev-platform and every drawing in
 * design/_appmock can consume this, and they currently each hand-roll their own.
 */
/* @end-generated-header */
:root {
  /* color — 34 */
  --brand: #5145B8;
  --brand-2: #0EA5A4;
  --bg: #F6F5F1;
  --bg-gradient: radial-gradient(ellipse at 12% 0%,color-mix(in srgb,var(--brand) 10%,var(--bg)) 0px,transparent 650px),linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 98%,var(--brand)));
  --surface: #FFFFFF;
  --border: #DDDBE4;
  --line: #ECEAF0;
  --ink: #242333;
  --muted: #676474;
  --faint: var(--muted);
  --brand-wash: color-mix(in srgb,var(--brand) 10%,var(--surface));
  --danger: #DC2626;
  --success-ink: #0A7856;
  --success-wash: #E8F7F1;
  --warning-ink: #B54708;
  --warning-wash: #FFF4E5;
  --danger-ink: #B42318;
  --danger-wash: #FDECEC;
  --ink-empty: var(--muted);
  --ink-soft: #3A3937;
  --border-dash: #D2D0CB;
  --brand-hover: color-mix(in srgb,var(--brand) 80%,black);
  --focus-ring: var(--brand);
  --hover-fill: rgba(23, 23, 22, 0.04);
  --press-fill: rgba(23, 23, 22, 0.09);
  --surface-glass: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 97%,var(--brand)));
  --control-primary: linear-gradient(155deg,color-mix(in srgb,var(--brand) 82%,white) 0%,var(--brand) 42%,color-mix(in srgb,var(--brand) 78%,black) 100%);
  --control-glass: linear-gradient(145deg,var(--surface) 0%,color-mix(in srgb,var(--brand) 3%,var(--surface)) 48%,color-mix(in srgb,var(--brand) 12%,var(--surface)) 100%);
  --control-selected: linear-gradient(145deg,var(--surface) 0%,color-mix(in srgb,var(--brand) 10%,var(--surface)) 45%,color-mix(in srgb,var(--brand) 22%,var(--surface)) 100%);
  --control-clear: linear-gradient(145deg, rgba(255,255,255,0.16), transparent 50%, rgba(30,20,50,0.10));
  --control-rim: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.55) 14%, transparent 34%, transparent 66%, rgba(255,255,255,0.5) 86%, rgba(255,255,255,0.9) 100%);
  --card-fill: linear-gradient(145deg,var(--surface) 45%,color-mix(in srgb,var(--surface) 97%,var(--brand)));
  --card-rim: color-mix(in srgb,var(--surface) 75%,var(--border));
  --star-field: radial-gradient(circle at 9% 25%,var(--surface) 0 .8px,transparent 1.4px),radial-gradient(circle at 90% 72%,var(--surface) 0 .8px,transparent 1.4px),radial-gradient(circle at 22% 82%,var(--surface) 0 .6px,transparent 1.2px),radial-gradient(circle at 79% 15%,var(--surface) 0 .6px,transparent 1.2px),linear-gradient(var(--surface),var(--surface)),linear-gradient(var(--surface),var(--surface));
  /* radius — 13 */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --radius-circle: 999px;
  --radius-bar: 999px;
  --radius-control-xs: 4px;
  --radius-control-sm: var(--radius-control-md);
  --radius-control-md: 10px;
  --radius-post-frame: 0.3em;
  --radius-post-legend: 0.2em;
  /* space — 6 */
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 16px;
  --space-xxl: 24px;
  /* font — 32 */
  --font-caption: 11px;
  --font-label: 12px;
  --font-body: 14px;
  --font-body-lg: 15px;
  --font-display: 32px;
  --font-metric: 36px;
  --font-metric-lead: 32px;
  --font-marketing-copy: 16px;
  --font-marketing-lede: 18px;
  --font-marketing-subhead: 24px;
  --font-marketing-title: 40px;
  --font-marketing-section: 48px;
  --font-marketing-feature: 60px;
  --font-marketing-statement: 72px;
  --font-marketing-display: 88px;
  --font-marketing-ornament: 140px;
  --font-marketing-fluid-public-hero: clamp(54px,7vw,105px);
  --font-marketing-fluid-ribbon: clamp(36px,4.8vw,72px);
  --font-marketing-fluid-hero: clamp(48px,7vw,88px);
  --font-marketing-fluid-chapter: clamp(76px,10.5vw,166px);
  --font-marketing-fluid-scale: clamp(45px,5vw,76px);
  --font-marketing-fluid-close: clamp(55px,6vw,92px);
  --font-marketing-fluid-mobile-hero: clamp(70px,10vw,140px);
  --font-marketing-fluid-directory: clamp(70px,13vw,110px);
  --font-post-base: 3.2cqw;
  --font-post-lead: 1.5em;
  --font-post-name: 1.05em;
  --font-post-body: 0.8em;
  --font-post-label: 0.66em;
  --font-post-caption: 0.62em;
  --font-post-hero: 2.9em;
  --font-post-chip: 0.52em;
  /* weight — 4 */
  --weight-text: 400;
  --weight-action: 500;
  --weight-strong: 600;
  --weight-display: 700;
  /* leading — 12 */
  --leading-tight: 1.15;
  --leading-text: 1.4;
  --leading-marketing-display: 0.95;
  --leading-marketing-solid: 1;
  --leading-marketing-heading: 1.1;
  --leading-marketing-compact: 1.2;
  --leading-marketing-short: 1.4;
  --leading-marketing-body: 1.6;
  --leading-marketing-reading: 1.7;
  --leading-marketing-relaxed: 1.8;
  --leading-post-hero: 0.92;
  --leading-post-solid: 1;
  /* tracking — 9 */
  --tracking-tight: -0.04em;
  --tracking-normal: 0;
  --tracking-caps: 0.06em;
  --tracking-marketing-normal: 0;
  --tracking-marketing-display: -.055em;
  --tracking-marketing-heading: -.035em;
  --tracking-marketing-tight: -.02em;
  --tracking-marketing-label: .06em;
  --tracking-marketing-wide: .14em;
  /* control — 4 */
  --control-h: 36px;
  --control-h-sm: 36px;
  --control-h-lg: 36px;
  --control-touch: 44px;
  /* shadow — 7 */
  --shadow-1: 0 2px 3px rgba(35,28,62,0.025), 0 8px 24px rgba(35,28,62,0.035);
  --shadow-2: 0 16px 48px rgba(35,28,62,0.12);
  --shadow-rim: inset 1px 1px 0 rgba(255,255,255,0.95), inset -1px -1px 0 rgba(255,255,255,0.65);
  --shadow-control: inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 1px rgba(36,24,75,0.14), 0 3px 0 rgba(55,39,99,0.22), 0 5px 8px rgba(42,29,76,0.12);
  --shadow-pressed: inset 0 2px 3px rgba(36,24,75,0.15), 0 1px 0 rgba(55,39,99,0.16), 0 2px 3px rgba(42,29,76,0.08);
  --shadow-flat: none;
  --shadow-card: inset 0 1px 0 rgba(255,255,255,0.95), 0 2px 3px rgba(35,28,62,0.025), 0 10px 28px rgba(35,28,62,0.055);
  /* motion — 4 */
  --motion-fast: 150ms;
  --motion-slow: 500ms;
  --motion-pulse: 1200ms;
  --motion-loop: 3000ms;
  /* ease — 2 */
  --ease-tint: cubic-bezier(0.72, 0, 0.16, 1);
  --ease-move: cubic-bezier(0.8, -0.4, 0.5, 1);
}