/*
 * Bishop Grossutti - Brand Variables
 * Version 1.0 | December 2025
 *
 * This file contains non-theme variables (typography, spacing, etc.)
 * Theme-specific colors are loaded from /css/themes/
 */

:root {
  /* ===========================================
     TYPOGRAPHY
     =========================================== */

  /* Primary font - Body text, navigation */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Display font - Headlines, hero sections */
  --font-display: 'Archivo Black', sans-serif;

  /* ===========================================
     TYPE SCALE
     =========================================== */

  --text-hero: 72px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body: 16px;
  --text-caption: 14px;
  --text-small: 12px;

  --leading-hero: 80px;
  --leading-h1: 56px;
  --leading-h2: 44px;
  --leading-h3: 32px;
  --leading-h4: 28px;
  --leading-body: 24px;
  --leading-caption: 20px;
  --leading-small: 16px;

  /* ===========================================
     SPACING
     =========================================== */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* ===========================================
     BORDER RADIUS
     =========================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ===========================================
     SHADOWS (use navy-rgb from theme)
     =========================================== */

  --shadow-sm: 0 1px 2px rgba(var(--color-navy-rgb), 0.05);
  --shadow-md: 0 4px 6px rgba(var(--color-navy-rgb), 0.1);
  --shadow-lg: 0 10px 15px rgba(var(--color-navy-rgb), 0.1);
  --shadow-card: 0 4px 6px rgba(var(--color-navy-rgb), 0.08);

  /* ===========================================
     LAYOUT
     =========================================== */

  --container-max: 1200px;
  --header-height: 80px;
}