/* ---- 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;

  /* Default primary color (will be overridden by brand color when present) */
  --p-primary-500: #57068b;

  /* Derived primary color scale using color-mix */
  /* Lighter shades - mixed with white */
  --p-primary-50: color-mix(in srgb, var(--p-primary-500) 10%, white);
  --p-primary-100: color-mix(in srgb, var(--p-primary-500) 20%, white);
  --p-primary-200: color-mix(in srgb, var(--p-primary-500) 35%, white);
  --p-primary-300: color-mix(in srgb, var(--p-primary-500) 60%, white);
  --p-primary-400: color-mix(in srgb, var(--p-primary-500) 80%, white);

  /* Darker shades - mixed with black */
  --p-primary-600: color-mix(in srgb, var(--p-primary-500) 85%, black);
  --p-primary-700: color-mix(in srgb, var(--p-primary-500) 70%, black);
  --p-primary-800: color-mix(in srgb, var(--p-primary-500) 55%, black);
  --p-primary-900: color-mix(in srgb, var(--p-primary-500) 40%, black);
  --p-primary-950: color-mix(in srgb, var(--p-primary-500) 25%, black);

  --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);

  --primary-color: var(--p-primary-500);

  --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;
  --p-card-shadow: rgba(0, 0, 0, 0.1) 4px 5px 30px 0px !important;
}

/**
** Sizing
*/
html:root {
  --mobile-bottom-nav-height: 5rem;
}