/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');

html:root {
  --p-surface-ground: #f5f5f5;

  --p-primary-50: #f7f2fb;
  --p-primary-100: #eaddf5;
  --p-primary-200: #d4bce9;
  --p-primary-300: #b88ad8;
  --p-primary-400: #8951ae;
  --p-primary-500: #57068b;
  --p-primary-600: #4a0578;
  --p-primary-700: #3b0462;
  --p-primary-800: #2d034c;
  --p-primary-900: #1f0237;
  --p-primary-950: #150126;

  --p-content-background: transparent;
  --p-card-background: var(--p-surface-0);
  --p-text-color: var(--p-surface-700);
  --p-text-hover-color: var(--p-surface-800);
  --p-text-muted-color: var(--p-surface-500);
  --p-text-hover-muted-color: var(--p-surface-600);
  --p-primary-color: var(--p-primary-500);
  --p-primary-contrast-color: #ffffff;
  --p-primary-hover-color: var(--p-primary-600);
  --p-primary-active-color: var(--p-primary-700);

  --p-surface-0: #ffffff;
  --p-surface-50: #f5f6f6;
  --p-surface-100: #f0f1f2;
  --p-surface-200: #ebeced;
  --p-surface-300: #e9eaeb; /* base */
  --p-surface-400: #c7c8c9;
  --p-surface-500: #a5a6a7;
  --p-surface-600: #838485;
  --p-surface-700: #616263;
  --p-surface-800: #3f4041;
  --p-surface-900: #1f2021;
  --p-surface-950: #000000;
}

@media (prefers-color-scheme: dark) {
  html:root {
    --p-surface-ground: #f5f5f5;
  }
}

/**
** Tweaks
*/
/* border-radius: var(--radius-md, 8px); */
html:root {
  --p-button-primary-background: linear-gradient(
    90deg,
    var(--p-primary-500) 0%,
    var(--p-primary-300) 100%
  );
  --p-button-primary-border-color: var(--p-primary-500) !important;
}