/* ===== tokens/fonts.css ===== */
/* Local Website Help — Web Fonts
   Poppins (headlines) + Open Sans (body) are both hosted natively on Google Fonts —
   no substitution needed. Loaded via the Google Fonts CSS2 endpoint so real @font-face
   rules (with correct unicode-range + woff2 hinting) are served directly from Google. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');


/* ===== tokens/colors.css ===== */
:root {
  /* ---- Brand primary ---- */
  --purple-700: #4F0E56;   /* deep purple — headlines on light, dark surfaces */
  --purple-500: #6E1B73;   /* primary purple — logo pin, primary actions */
  --gold-500: #C79A46;     /* primary gold — headline accents, CTAs on dark */
  --gold-300: #D8B06A;     /* soft gold — highlights, glows, secondary accents */

  /* ---- Neutrals ---- */
  --gray-900: #2E2E33;     /* body copy on light */
  --gray-700: #55555C;     /* secondary text */
  --gray-500: #8B8B91;     /* muted text, placeholders, disabled */
  --gray-200: #E9E9EC;     /* borders, dividers */
  --gray-100: #F9F8F5;     /* app background, section alternation */
  --white: #FFFFFF;

  /* ---- Semantic / accent ---- */
  --success-500: #43A047;
  --info-500: #2F80ED;
  --warning-500: #F5A623;
  --error-500: #D64545;
  --teal-500: #3F9CA8;

  /* ---- Semantic aliases ---- */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-inverse: var(--white);
  --text-brand: var(--purple-700);
  --text-accent: var(--gold-500);

  --surface-page: var(--white);
  --surface-alt: var(--gray-100);
  --surface-card: var(--white);
  --surface-dark: var(--purple-700);
  --surface-dark-2: #3A0A40; /* deeper purple, for gradients on dark hero */

  --border-subtle: var(--gray-200);
  --border-strong: var(--gray-500);

  --brand-primary: var(--purple-500);
  --brand-primary-hover: var(--purple-700);
  --brand-accent: var(--gold-500);
  --brand-accent-hover: #B3862F;

  --focus-ring: color-mix(in oklch, var(--gold-500) 60%, white);

  /* Glow — used sparingly behind CTAs / icons per brand's "highlight glow" motif */
  --glow-gold: 0 0 0 4px color-mix(in oklch, var(--gold-500) 22%, transparent), 0 0 24px color-mix(in oklch, var(--gold-500) 45%, transparent);
  --glow-purple: 0 0 0 4px color-mix(in oklch, var(--purple-500) 20%, transparent), 0 0 28px color-mix(in oklch, var(--purple-500) 40%, transparent);
}


/* ===== tokens/typography.css ===== */
:root {
  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;

  /* Weights actually used per stylesheet */
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-regular: 400;

  /* Display / headline scale (Poppins) */
  --text-display-xl: 700 3.5rem/1.05 var(--font-display);
  --text-display-lg: 700 2.75rem/1.1 var(--font-display);
  --text-display-md: 600 2rem/1.2 var(--font-display);
  --text-display-sm: 600 1.5rem/1.3 var(--font-display);
  --text-display-xs: 600 1.125rem/1.4 var(--font-display);

  /* Body (Open Sans) */
  --text-body-lg: 400 1.25rem/1.6 var(--font-body);
  --text-body-md: 400 1.0625rem/1.65 var(--font-body);
  --text-body-sm: 400 0.9375rem/1.55 var(--font-body);
  --text-body-semibold: 600 1.0625rem/1.6 var(--font-body);
  --text-caption: 400 0.8125rem/1.4 var(--font-body);
  --text-label: 600 0.8125rem/1.3 var(--font-body);
}


/* ===== tokens/spacing.css ===== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --content-max: 1200px;
  --content-narrow: 760px;
}


/* ===== tokens/effects.css ===== */
:root {
  /* Corner radii — brand uses generously rounded corners throughout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-pin: 50% 50% 50% 0; /* map-pin silhouette from the logo mark, for badges/markers */

  /* Shadows — soft, warm, low-contrast; never harsh black */
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--gray-900) 8%, transparent);
  --shadow-md: 0 4px 16px color-mix(in oklch, var(--gray-900) 10%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in oklch, var(--gray-900) 14%, transparent);
  --shadow-card: 0 2px 10px color-mix(in oklch, var(--purple-700) 8%, transparent);

  /* Transitions — quick, no bounce; brand is efficient/professional not playful */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
}