/* Source: Web Awesome Create / Squawk pricing. Theme variables adapted for Playback. */

:where(:root),
.wa-light,
.wa-dark,
.wa-invert {
  --wa-color-brand-95: oklch(96.5% 0.02 350);
  --wa-color-brand-90: oklch(92.5% 0.045 350);
  --wa-color-brand-80: oklch(85% 0.1 352);
  --wa-color-brand-70: oklch(76% 0.16 354);
  --wa-color-brand-60: oklch(67% 0.21 356);
  --wa-color-brand-50: oklch(57% 0.22 358);
  --wa-color-brand-40: oklch(47.5% 0.19 358);
  --wa-color-brand-30: oklch(40% 0.16 358);
  --wa-color-brand-20: oklch(32.5% 0.13 358);
  --wa-color-brand-10: oklch(24% 0.09 358);
  --wa-color-brand-05: oklch(18.5% 0.065 358);
  --wa-color-brand: var(--wa-color-brand-70);
  --wa-color-brand-on: var(--wa-color-neutral-05);

  --wa-color-neutral-95: oklch(96.5% 0.012 95);
  --wa-color-neutral-90: oklch(92% 0.014 92);
  --wa-color-neutral-80: oklch(83.5% 0.015 90);
  --wa-color-neutral-70: oklch(75% 0.015 88);
  --wa-color-neutral-60: oklch(67% 0.014 86);
  --wa-color-neutral-50: oklch(56.5% 0.013 84);
  --wa-color-neutral-40: oklch(46% 0.012 82);
  --wa-color-neutral-30: oklch(39% 0.011 80);
  --wa-color-neutral-20: oklch(30% 0.01 80);
  --wa-color-neutral-10: oklch(21% 0.008 80);
  --wa-color-neutral-05: oklch(15.5% 0.006 80);

  --wa-font-family-body: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --wa-font-family-heading: 'Archivo Black', 'Space Grotesk', sans-serif;
  --wa-font-weight-heading: var(--wa-font-weight-normal);
  --wa-font-weight-action: var(--wa-font-weight-bold);

  --wa-border-width-scale: 3;
  --wa-border-radius-scale: 0.75;
  --wa-shadow-offset-x-scale: 2;
  --wa-shadow-offset-y-scale: 2;
  --wa-shadow-blur-scale: 0;
  --wa-shadow-spread-scale: 0;

  --wa-button-transform-hover: translate(calc(-1 * var(--wa-space-3xs)), calc(-1 * var(--wa-space-3xs)));
  --wa-button-transform-active: translate(var(--wa-space-2xs), var(--wa-space-2xs));

  --wa-form-control-border-color: var(--wa-color-surface-border);
  --wa-form-control-label-font-weight: var(--wa-font-weight-bold);
  --wa-tooltip-border-width: var(--wa-border-width-s);
  --wa-tooltip-font-size: var(--wa-font-size-s);
}

/* Light: ink on cream */
:where(:root),
.wa-light,
.wa-dark .wa-invert {
  --wa-color-surface-default: oklch(96.5% 0.035 95);
  --wa-color-surface-raised: oklch(99% 0.012 95);
  --wa-color-surface-lowered: oklch(92% 0.045 95);
  --wa-color-surface-border: var(--wa-color-neutral-05);
  --wa-color-shadow: var(--wa-color-neutral-05);
  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: var(--wa-color-neutral-05);
  --wa-tooltip-background-color: var(--wa-color-neutral-05);
  --wa-tooltip-border-color: var(--wa-color-neutral-05);
  --wa-tooltip-content-color: oklch(96.5% 0.035 95);

  --plan-lime: oklch(91% 0.17 125);
  --plan-yellow: oklch(92% 0.16 98);
  --plan-violet: oklch(85% 0.095 300);
}

/* Dark: neon on ink. Cards fill with a deep step of their color and glow with the bright one. */
.wa-dark,
.wa-invert {
  --wa-color-surface-default: var(--wa-color-neutral-05);
  --wa-color-surface-raised: var(--wa-color-neutral-10);
  --wa-color-surface-lowered: oklch(12% 0.005 80);
  --wa-color-surface-border: oklch(94% 0.03 95);
  --wa-color-shadow: oklch(94% 0.03 95);
  --wa-color-brand-fill-loud: var(--wa-color-brand-70);
  --wa-color-brand-on-loud: var(--wa-color-neutral-05);
  --wa-tooltip-background-color: oklch(94% 0.03 95);
  --wa-tooltip-border-color: oklch(94% 0.03 95);
  --wa-tooltip-content-color: var(--wa-color-neutral-05);

  --plan-lime: oklch(88% 0.2 128);
  --plan-yellow: oklch(90% 0.17 98);
  --plan-violet: oklch(80% 0.13 300);
}