/**
 * Hooves of Hope - Design Tokens
 * ================================
 * CSS Custom Properties derived from the badge-style logo
 * with warm earth tones, forest greens, rich browns, and warm golds.
 *
 * Usage: Add this to Astra's Additional CSS in Customizer,
 * or enqueue as a separate stylesheet in functions.php.
 */

:root {
  /* ========================================
     BRAND COLORS
     ======================================== */
  --color-primary:          #2D5F2D; /* Forest Green */
  --color-secondary:        #6B3A2A; /* Saddle Brown */
  --color-accent:           #C8952E; /* Warm Gold */
  --color-tertiary:         #8B3A3A; /* Barn Red */

  /* ========================================
     BACKGROUND COLORS
     ======================================== */
  --color-bg-page:          #FAF6F0; /* Cream White */
  --color-bg-alt:           #F5F0E8; /* Off White */
  --color-bg-highlight:     #E8D5A3; /* Hay Gold Light */
  --color-bg-card:          #FFFFFF; /* White */

  /* ========================================
     TEXT COLORS
     ======================================== */
  --color-text-heading:     #2C2824; /* Dark Charcoal */
  --color-text-body:        #4A4540; /* Warm Gray */
  --color-text-muted:       #8B8178; /* Fence Post Gray */
  --color-text-on-dark:     #E8D5A3; /* Hay Gold on dark bg */
  --color-text-on-dark-heading: #FFFFFF;

  /* ========================================
     INTERACTIVE COLORS
     ======================================== */
  --color-link:             #C8952E;
  --color-link-hover:       #A67A1F;
  --color-link-visited:     #6B3A2A;
  --color-focus-ring:       rgba(200, 149, 46, 0.25);

  /* Button: Primary (Gold) */
  --color-btn-primary-bg:   #C8952E;
  --color-btn-primary-text: #2C2824; /* Dark text for AA contrast */
  --color-btn-primary-hover:#A67A1F;

  /* Button: Secondary (Green) */
  --color-btn-secondary-bg:   #2D5F2D;
  --color-btn-secondary-text: #FFFFFF;
  --color-btn-secondary-hover:#1E4A1E;

  /* Button: Urgent (Red) */
  --color-btn-urgent-bg:    #8B3A3A;
  --color-btn-urgent-text:  #FFFFFF;
  --color-btn-urgent-hover: #6E2E2E;

  /* ========================================
     STATUS COLORS
     ======================================== */
  --color-success:          #2D5F2D;
  --color-error:            #8B3A3A;
  --color-warning:          #C8952E;
  --color-info:             #4A7A8B;

  /* ========================================
     TYPOGRAPHY
     ======================================== */
  --font-heading:  "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:     "Source Sans 3", "Segoe UI", Tahoma, sans-serif;
  --font-accent:   "Caveat", cursive;

  /* Font Sizes (mobile-first) */
  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.375rem;   /* 22px */
  --text-2xl:      1.625rem;   /* 26px */
  --text-3xl:      2rem;       /* 32px */
  --text-4xl:      2.25rem;    /* 36px */
  --text-5xl:      3rem;       /* 48px */

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Font Weights */
  --weight-normal:   400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ========================================
     SPACING
     ======================================== */
  --space-xs:      0.25rem;  /* 4px */
  --space-sm:      0.5rem;   /* 8px */
  --space-md:      1rem;     /* 16px */
  --space-lg:      1.5rem;   /* 24px */
  --space-xl:      2rem;     /* 32px */
  --space-2xl:     3rem;     /* 48px */
  --space-3xl:     4rem;     /* 64px */
  --space-4xl:     6rem;     /* 96px */

  /* ========================================
     SPACING ALIASES (theme.css compatibility)
     ======================================== */
  --spacing-1:     0.25rem;
  --spacing-2:     0.5rem;
  --spacing-3:     0.75rem;
  --spacing-4:     1rem;
  --spacing-5:     1.25rem;
  --spacing-6:     1.5rem;
  --spacing-8:     2rem;
  --spacing-10:    2.5rem;
  --spacing-12:    3rem;
  --spacing-16:    4rem;
  --spacing-20:    5rem;

  /* ========================================
     COLOR ALIASES (theme.css compatibility)
     ======================================== */
  --color-forest-green:       #2D5F2D;
  --color-forest-green-dark:  #1E4A1E;
  --color-hay-gold:           #C8952E;
  --color-hay-gold-light:     #E8D5A3;
  --color-saddle-brown:       #6B3A2A;
  --color-barn-red:           #8B3A3A;
  --color-sage-green:         #7A9A6B;
  --color-sage-green-light:   #E8F0E4;
  --color-dark-charcoal:      #2C2824;
  --color-warm-gray:          #4A4540;
  --color-cream:              #FAF6F0;
  --color-white:              #FFFFFF;
  --color-text-primary:       #2C2824;
  --color-text-secondary:     #4A4540;

  /* ========================================
     LAYOUT ALIASES
     ======================================== */
  --container-max-width:   1140px;
  --border-radius-sm:      0.25rem;
  --border-radius-md:      0.5rem;
  --border-radius-lg:      1rem;
  --font-handwritten:      "Caveat", cursive;

  /* ========================================
     ADDITIONAL VARIABLE ALIASES
     (used by inline template styles)
     ======================================== */
  --color-primary-dark:    #1E4A1E;
  --color-dark-gray:       #4A4540;
  --font-size-xs:          0.75rem;
  --font-size-sm:          0.875rem;
  --font-size-base:        1rem;
  --font-size-md:          1.125rem;
  --font-size-lg:          1.375rem;
  --font-size-xl:          1.625rem;
  --font-size-2xl:         2rem;
  --font-size-3xl:         2.5rem;
  --font-weight-normal:    400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --line-height-tight:     1.2;
  --line-height-normal:    1.6;
  --line-height-relaxed:   1.75;
  --transition-base:       0.2s ease;
  --transition-slow:       0.3s ease;
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);

  /* ========================================
     LAYOUT
     ======================================== */
  --container-narrow:    680px;
  --container-standard:  1140px;
  --container-wide:      1320px;

  /* ========================================
     BORDERS & RADIUS
     ======================================== */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-full:   9999px;

  --border-light:  1px solid #E8D5A3;
  --border-medium: 2px solid #6B3A2A;
  --border-accent: 3px solid #C8952E;

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm:     0 1px 3px rgba(44, 40, 36, 0.08);
  --shadow-md:     0 4px 12px rgba(44, 40, 36, 0.12);
  --shadow-lg:     0 8px 24px rgba(44, 40, 36, 0.16);
  --shadow-warm:   0 4px 16px rgba(200, 149, 46, 0.15);
  --shadow-xl:     0 12px 32px rgba(44, 40, 36, 0.2);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   350ms ease;

  /* ========================================
     ADDITIONAL TEMPLATE ALIASES
     ======================================== */
  --color-off-white:       #F5F0E8;
  --color-primary-light:   #E8F0E4;
  --color-accent-light:    #F5ECD8;
  --color-border:          #E8D5A3;
  --color-text-dark:       #2C2824;
}


/* ==========================================
   BASE STYLES
   ========================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-xl);  font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ==========================================
   RESPONSIVE TYPOGRAPHY (Desktop)
   ========================================== */

@media (min-width: 1024px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  body { font-size: var(--text-lg); }
}

/* Component styles are in theme.css */