:root {
  --white: #fff;
  --base-white: #fcfcfc;
  --black: #130225;
  --orange: #e95f4f;
  --blue: #95e1ff;
  --purple: #30044d;
  --purple-50: #f3e8fa;
  --purple-400: #833ffa;
  --green: #8cd4ac;
  --yellow-200: #fff4d9;
  --yellow-600: #b8771a;
  --green-200: #d2f0d5;
  --gray: #9e9e9e;
  --grey: #9e9e9e;
  --gray-50: #f8f8f8;
  --black-95: #f2f2f2;
  --black-90: #e6e6e6;
  --black-80: #cccccc;
  --black-70: #b3b3b3;
  --black-60: #999999;
  --black-50: #808080;
  --black-40: #666666;
  --black-30: #4d4d4d;
  --black-20: #333333;
  --black-10: #1a1a1a;
  --black-5: #0d0d0d;
  --success: #167e0c;
  --info: #02a9ea;
  --warning: #fcca46;
  --error: #ca3f5c;
  --gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(128, 128, 128, 0.14) 100%
  );
  --sans: Work Sans, "work-sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    sans-serif;
  --serif: "freight-macro-pro", serif;

  --mq-point-xs: 320px;
  --mq-point-s: 612px;
  --mq-point-m: 768px;
  --mq-point-l: 980px;
  --mq-point-xl: 1200px;
  --mq-point-xl2: 1420px;
  --mq-point-xl3: 1600px;

  /* Typography tokens - Design Principles Compliant (Section 5.2: Typography Governance) */
  /* Line height: ~150% of font size for accessible spacing */
  --font-size-xs: 0.75rem;    /* 12px - small labels, captions */
  --font-size-sm: 0.875rem;    /* 14px - body text small, helper text */
  --font-size-base: 1rem;      /* 16px - body text standard */
  --font-size-lg: 1.125rem;    /* 18px - body text large */
  --font-size-xl: 1.25rem;      /* 20px - subheadings */
  --font-size-2xl: 1.5rem;      /* 24px - headings */
  --font-size-3xl: 1.875rem;    /* 30px - large headings */
  --font-size-4xl: 2.25rem;     /* 36px - display headings */

  --line-height-tight: 1.25;   /* For headings */
  --line-height-normal: 1.5;    /* ~150% - standard body text (Section 5.2) */
  --line-height-relaxed: 1.75; /* For longer reading content */

  /* Character Per Line (CPL) constraints - Section 5.2 */
  --max-width-prose: 65ch;      /* Desktop: 45-85 CPL */
  --max-width-prose-mobile: 35ch; /* Mobile: 30-50 CPL */
}

.btn-primary {
  background-color: var(--purple);
  border: none;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  padding: 8px;
}

.btn-primary:focus,
.btn-primary:hover {
  background-color: var(--purple);
  opacity: 0.8;
}