/**
 * Pacific Design Tokens — Membership Center
 * Sourced from Figma: Membership Center Redesign (node 3312:46153)
 * https://www.figma.com/design/mWKiQ4Bqff5WMCcvhQA6S6
 */

:root {
  /* ── Marketing ── */
  --marketing-color-sofiblue: #00a2c7;

  /* ── Plus ── */
  --plus-color-poppurple: #5c26bd;
  --plus-gradient-upgrade-from: #151035;
  --plus-gradient-upgrade-via: #201749;
  --plus-gradient-upgrade-to: #330072;

  /* ── Content ── */
  --content-color-primary-default: #1a1919;
  --content-color-primary-inverse: #0a0a0a;
  --content-color-secondary: #706f6e;
  --content-color-ondark: #ffffff;
  --content-color-statusbar: #0a0a0a;
  --content-color-disabled-2: #1a1919;

  /* ── Surfaces ── */
  --surface-color-base: #faf8f5;
  --surface-color-sub: #00a2c7;
  --surface-color-elevated-default: #ffffff;
  --surface-color-edge: rgba(10, 10, 10, 0.16);

  /* ── Bone ── */
  --bone-bone100: #f5f3f0;

  /* ── Stroke ── */
  --stroke-color-edge: rgba(10, 10, 10, 0.1);
  --stroke-color-indicator-selected: #1a1919;
  --stroke-color-indicator-unselected: #dbdad7;

  /* ── Button ── */
  --button-color-brand-default: #00a2c7;
  --button-color-neutral-default: #1a1919;
  --button-color-neutral-bg: rgba(0, 0, 0, 0.07);

  /* ── Typography: Family ── */
  --family-tt-norms: "TT Norms", -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;

  /* ── Typography: Sizes ── */
  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;

  /* ── Typography: Line heights ── */
  --line-height-16: 16px;
  --line-height-20: 20px;
  --line-height-24: 24px;

  /* ── Typography: Weights ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ── Typography: Letter spacing ── */
  --letter-spacing-overline: 0.6px;   /* Flutter/Overline — 5% at 12px */
  --letter-spacing-label: 0.12px;     /* 1% at 12px */
  --letter-spacing-title-medium: -0.2px;  /* -1% at 18px */
  --letter-spacing-headline-9: -0.2px;      /* -1% at 20px (text-title-large) */
  --letter-spacing-body-bold: -0.16px;      /* -1% at 16px */

  /* ── Spacing ── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;

  /* ── Radius ── */
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-pill: 100px;

  /* ── Shadows ── */
  --shadow-down-1:
    0 0 0.5px var(--surface-color-edge),
    0 0 4px rgba(10, 10, 10, 0.04),
    0 2px 8px rgba(10, 10, 10, 0.02);

  --shadow-up-4:
    0 0 1px var(--surface-color-edge),
    0 -6px 16px rgba(10, 10, 10, 0.04),
    0 -14px 32px rgba(10, 10, 10, 0.02);

  /* ── Semantic aliases ── */
  --font-overline: var(--weight-medium) var(--size-12) / var(--line-height-16) var(--family-tt-norms);
  --font-caption: var(--weight-medium) var(--size-12) / var(--line-height-16) var(--family-tt-norms);
  --font-label-small: var(--weight-medium) var(--size-12) / var(--line-height-16) var(--family-tt-norms);
  --font-body-small: var(--weight-regular) var(--size-12) / var(--line-height-16) var(--family-tt-norms);
  --font-subtitle-2: var(--weight-medium) var(--size-14) / var(--line-height-20) var(--family-tt-norms);
  --font-title-small: var(--weight-medium) var(--size-16) / var(--line-height-20) var(--family-tt-norms);
  --font-title-medium: var(--weight-medium) var(--size-18) / var(--line-height-24) var(--family-tt-norms);
  --font-headline-9: var(--weight-medium) var(--size-20) / var(--line-height-24) var(--family-tt-norms);
  --font-title-large: var(--weight-medium) var(--size-20) / var(--line-height-24) var(--family-tt-norms); /* TT Norms Medium 20/24, -0.2 tracking */
  --font-button-small: var(--weight-bold) var(--size-14) / var(--line-height-20) var(--family-tt-norms);
  --font-body-1: var(--weight-bold) var(--size-16) / var(--line-height-20) var(--family-tt-norms);
}