/*
  Aspire Loft Theme
  Change the website colors here only. All custom pages use these variables.
*/

@font-face {
  font-family: "Heebo";
  src: url("../fonts/Heebo.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #5865F2;
  --brand-hover: #4652D9;
  --brand-soft: #EEF2FF;
  --brand-soft-strong: #E0E7FF;
  --accent: #7C3AED;

  --page-bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-soft: #F1F5F9;
  --surface-raised: #FFFFFF;

  --heading: #334155;
  --heading-soft: #475569;
  --text: #475569;
  --text-muted: #64748B;
  --text-light: #FFFFFF;

  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --brand-rgb: 88, 101, 242;
  --surface-rgb: 255, 255, 255;
  --shadow-rgb: 15, 23, 42;

  --shadow-sm: 0 10px 30px rgba(var(--shadow-rgb), 0.08);
  --shadow-md: 0 18px 45px rgba(var(--shadow-rgb), 0.10);
  --shadow-lg: 0 24px 70px rgba(var(--shadow-rgb), 0.12);

  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --focus-ring: 0 0 0 4px rgba(var(--brand-rgb), 0.18);
  --hero-gradient: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 100%);
  --page-gradient: linear-gradient(180deg, var(--brand-soft) 0%, var(--page-bg) 45%, var(--surface) 100%);
  --navbar-bg: rgba(var(--surface-rgb), 0.96);
  --store-button-ring-hover: rgba(var(--surface-rgb), 0.18);
}