/* ========================================
   African Spots v2 - CSS Variables
   Project-Specific Colors & Fonts Only
   ======================================== */

:root {
  /* ========================================
     TYPOGRAPHY - Project-Specific Fonts Only
     ======================================== */
  
  /* Font Families */
  --font-display: 'Krona One', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-caveat: 'Caveat', cursive;
  --font-fallback: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

/* ========================================
   UTILITY CLASSES - Project-Specific Only
   ======================================== */

/* Color utilities removed - using design-system.css instead */

/* Typography utilities */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-caveat { font-family: var(--font-caveat); }

/* Global anchor tag styling */
a {
  text-decoration: none !important;
  color: inherit;
}

a:hover {
  text-decoration: none !important;
}

a:focus {
  text-decoration: none !important;
}

a:visited {
  text-decoration: none !important;
}

/* Button typography */
button, .btn, input[type="button"], input[type="submit"] {
  font-family: var(--font-body);
}

/* Headline typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

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

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
}

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

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }

.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }