:root {

  --aib-text: #222222;

  --aib-size-display: 44px;
  --aib-size-h1: 36px;
  --aib-size-h2: 30px;
  --aib-size-h3: 22px;
  --aib-size-h4: 18px;
  --aib-size-h5: 16px;
  --aib-size-lead: 18px;
  --aib-size-body: 16px;
  --aib-size-caption: 14px;
  --aib-size-eyebrow: 12px;
  --aib-size-button: 15px;
  --aib-size-quote: 20px;
  --aib-size-stat: 40px;
  --aib-size-nav: 15px;

  --aib-text-muted: #6a6a6a;
  --aib-text-inverse: #ffffff;

  --aib-surface: #ffffff;

  --aib-surface-alt: #f7f7f7;
  --aib-surface-inverse: #222222;

  --aib-border: #dddddd;

  --aib-primary: #ff385c;

  --aib-on-primary: #ffffff;

  --aib-primary-hover: #e00b41;

  --aib-accent: #ff385c;

  --aib-accent-soft: #ffd1da;

  --aib-link: #d9234a;

  --aib-background: #ffffff;

  --aib-surface2: #f0f0f0;

  --aib-secondary: #460479;

  --aib-on-accent: #ffffff;

  --aib-on-dark: #ffffff;
  --aib-on-dark-soft: #bbbbbb;

  --aib-font-display: "Nunito", system-ui, sans-serif;
  --aib-font-body: "Nunito Sans", system-ui, sans-serif;
  --aib-font-accent: var(--aib-font-body);

  --aib-font-heading: "Nunito", system-ui, sans-serif;

  --aib-text-display: 600 var(--aib-size-display)/1.18 var(--aib-font-display);
  --aib-text-eyebrow: 700 var(--aib-size-eyebrow)/1.33 var(--aib-font-display);
  --aib-text-h2: 500 var(--aib-size-h2)/1.18 var(--aib-font-display);
  --aib-text-h3: 600 var(--aib-size-h3)/1.25 var(--aib-font-display);
  --aib-text-h4: 600 var(--aib-size-h4)/1.35 var(--aib-font-display);
  --aib-text-h5: 600 var(--aib-size-h5)/1.4 var(--aib-font-display);
  --aib-text-lead: 400 var(--aib-size-lead)/1.5 var(--aib-font-body);
  --aib-text-body: 400 var(--aib-size-body)/1.5 var(--aib-font-body);
  --aib-text-caption: 500 var(--aib-size-caption)/1.29 var(--aib-font-body);

  --aib-radius-media: 20px;
  --aib-radius-card: 14px;
  --aib-radius-control: 8px;
  --aib-radius-chip: 9999px;

  --aib-shadow-card: none;

  --aib-border-card: 1px solid var(--aib-border);

  --aib-space-section: 64px;
  --aib-gap-lg: 24px;
  --aib-gap-md: 16px;
  --aib-gap-sm: 8px;
  --aib-gap-xs: 4px;
  --aib-gap-xl: 48px;

  --aib-shadow-hover: 0 0 0 1px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.1);
  --aib-duration: 200ms;

  --aib-text-button: 600 var(--aib-size-button)/1.25 var(--aib-font-body);
  --aib-letter-spacing-button: 0.01em;
  --aib-letter-spacing-display: -0.01em;

  --aib-letter-spacing-eyebrow: 0.08em;
  --aib-pressed-scale: 0.98;
  --aib-pressed-opacity: 0.92;

  --aib-border-strong: var(--aib-text);

  --aib-shadow-dialog: 0 8px 24px rgba(0, 0, 0, 0.12);

  --aib-icon-box: 44px;
  --aib-icon-glyph: 26px;

  --aib-container: 1200px;
   --aib-glow: color-mix(in srgb, var(--aib-accent) 12%, var(--aib-background));
  --aib-glow-strong: color-mix(
    in srgb,
    var(--aib-accent) 22%,
    var(--aib-background)
  );
}

:root {

  --aib-background: #121212;
  --aib-surface: #121212;
  --aib-surface-alt: #181818;
  --aib-surface2: #1f1f1f;
  --aib-surface-inverse: #eeeeee;

  --aib-text: #ffffff;
  --aib-text-muted: #b3b3b3;
  --aib-text-inverse: #121212;
  --aib-text-muted-bright: #cbcbcb;

  --aib-border: #4d4d4d;
  --aib-border-card: none;
  --aib-border-strong: #7c7c7c;
  --aib-border-input: inset 0 0 0 1px #7c7c7c;

  --aib-primary: #1ed760;
  --aib-primary-hover: #1db954;
  --aib-on-primary: #000000;
  --aib-secondary: #252525;
  --aib-accent: #1ed760;
  --aib-on-accent: #000000;
  --aib-link: #1ed760;
  --aib-accent-soft: rgba(30, 215, 96, 0.15);
  --aib-link: #ffffff;

  --aib-font-display:
    SpotifyMixUITitle, "CircularSp-Arab", "Helvetica Neue", helvetica, arial,
    sans-serif;
  --aib-font-body:
    SpotifyMixUI, "CircularSp-Arab", "Helvetica Neue", helvetica, arial,
    sans-serif;
  --aib-font-accent: var(--aib-font-body);
  --aib-font-heading:
    SpotifyMixUITitle, "CircularSp-Arab", "Helvetica Neue", helvetica, arial,
    sans-serif;

  --aib-size-display: 24px;
  --aib-size-eyebrow: 10px;
  --aib-size-h2: 22px;
  --aib-size-h3: 18px;
  --aib-size-h4: 14px;
  --aib-size-h5: 12px;
  --aib-size-lead: 16px;
  --aib-size-body: 16px;
  --aib-size-caption: 14px;
  --aib-size-button: 14px;

  --aib-text-display: 700 var(--aib-size-display)/1.2 var(--aib-font-display);
  --aib-text-eyebrow: 600 var(--aib-size-eyebrow)/1.33 var(--aib-font-body);
  --aib-text-h2: 600 var(--aib-size-h2)/1.3 var(--aib-font-heading);
  --aib-text-h3: 700 var(--aib-size-h3)/1.25 var(--aib-font-heading);
  --aib-text-h4: 700 var(--aib-size-h4)/1.29 var(--aib-font-heading);
  --aib-text-h5: 600 var(--aib-size-h5)/1.33 var(--aib-font-heading);
  --aib-text-lead: 400 var(--aib-size-lead)/1.5 var(--aib-font-body);
  --aib-text-body: 400 var(--aib-size-body)/1.3 var(--aib-font-body);
  --aib-text-caption: 400 var(--aib-size-caption)/1.4 var(--aib-font-body);

  --aib-radius-tag: 2px;
  --aib-radius-pill: 500px;
  --aib-radius-circle: 50%;
  --aib-shadow-card: rgba(0, 0, 0, 0.3) 0px 8px 8px;
  --aib-shadow-dialog: rgba(0, 0, 0, 0.5) 0px 8px 24px;

  --aib-space-section: 32px;
  --aib-gap-lg: 20px;
  --aib-gap-md: 16px;
  --aib-gap-sm: 8px;
  --aib-gap-xs: 4px;
  --aib-gap-xl: 32px;

  --aib-hover-lift: 0px;
  --aib-duration: 200ms;
  --aib-container: 1280px;

  --aib-critical: #f3727f;
  --aib-warning: #ffa42b;
  --aib-info: #539df5;

  --aib-text-button: 700 var(--aib-size-button)/1 var(--aib-font-body);
  --aib-letter-spacing-button: 1.4px;

  --aib-on-dark: #ffffff;
  --aib-on-dark-soft: #b3b3b3;
}