/* ============================================================
   Caravan Center — Brand Tokens
   Version 1 — April 2026
   
   CSS custom properties for the WordPress theme.
   Drop this file into the theme and import it once at the top
   of style.css. All other styles should reference these tokens
   instead of hardcoding values.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLOURS — Primary palette
     ---------------------------------------------------------- */
  --cc-terracotta:   #A85030;  /* Primary brand colour. Headlines, caravan body, primary buttons. */
  --cc-slate:        #3A3F47;  /* Body text, dark accents, kettle braai, wordmark text. */
  --cc-bone:         #F0E8DC;  /* Background, paper feel, light surfaces. */
  --cc-dusty-blue:   #5A7585;  /* Secondary accent. Links, supporting graphics. */
  --cc-olive:        #5F7245;  /* Secondary accent. Success states, nature touchpoints. */

  /* ----------------------------------------------------------
     COLOURS — Neutrals (derived shades for UI states)
     ---------------------------------------------------------- */
  --cc-bone-soft:    #F8F2E8;  /* Lighter bone — card backgrounds, hover states. */
  --cc-bone-deep:    #E5DBC8;  /* Darker bone — borders, dividers, disabled states. */
  --cc-slate-soft:   #5A6068;  /* Lighter slate — secondary text, captions. */
  --cc-slate-deep:   #1E2128;  /* Darker slate — emphasis, hover states. */
  --cc-terracotta-soft: #C77556;  /* Lighter terracotta — hover on terracotta buttons. */
  --cc-terracotta-deep: #8A3F22;  /* Darker terracotta — pressed states, emphasis. */

  /* ----------------------------------------------------------
     COLOURS — Semantic (use these for UI meaning, not raw colours)
     ---------------------------------------------------------- */
  --cc-color-bg:              var(--cc-bone);
  --cc-color-bg-card:         var(--cc-bone-soft);
  --cc-color-text:            var(--cc-slate);
  --cc-color-text-muted:      var(--cc-slate-soft);
  --cc-color-heading:         var(--cc-slate);
  --cc-color-heading-accent:  var(--cc-terracotta);
  --cc-color-link:            var(--cc-terracotta);
  --cc-color-link-hover:      var(--cc-terracotta-deep);
  --cc-color-border:          var(--cc-bone-deep);
  --cc-color-divider:         var(--cc-bone-deep);
  --cc-color-button-primary:  var(--cc-terracotta);
  --cc-color-button-primary-hover: var(--cc-terracotta-deep);
  --cc-color-button-text:     var(--cc-bone);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font families
     ---------------------------------------------------------- */
  --cc-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --cc-font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font weights
     ---------------------------------------------------------- */
  --cc-fw-regular:  400;
  --cc-fw-medium:   500;
  --cc-fw-semibold: 600;  /* Lora SemiBold for headings and wordmark */
  --cc-fw-bold:     700;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font sizes (using fluid clamp for responsive)
     ---------------------------------------------------------- */
  --cc-fs-xs:    0.75rem;   /* 12px — captions, fine print */
  --cc-fs-sm:    0.875rem;  /* 14px — small body, meta */
  --cc-fs-base:  1rem;      /* 16px — body text */
  --cc-fs-lg:    1.125rem;  /* 18px — large body, lead paragraphs */
  --cc-fs-xl:    1.25rem;   /* 20px — small headings */
  --cc-fs-2xl:   1.5rem;    /* 24px — h4 */
  --cc-fs-3xl:   clamp(1.75rem, 4vw, 2rem);     /* 28-32px — h3 */
  --cc-fs-4xl:   clamp(2rem, 5vw, 2.5rem);      /* 32-40px — h2 */
  --cc-fs-5xl:   clamp(2.5rem, 6vw, 3.5rem);    /* 40-56px — h1 */
  --cc-fs-hero:  clamp(3rem, 8vw, 5rem);        /* 48-80px — hero headings */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Line heights
     ---------------------------------------------------------- */
  --cc-lh-tight:   1.15;  /* Display headings */
  --cc-lh-snug:    1.3;   /* Subheadings */
  --cc-lh-normal:  1.5;   /* UI text */
  --cc-lh-relaxed: 1.65;  /* Body paragraphs */

  /* ----------------------------------------------------------
     SPACING — Use a 4px base scale
     ---------------------------------------------------------- */
  --cc-space-1:  0.25rem;  /* 4px */
  --cc-space-2:  0.5rem;   /* 8px */
  --cc-space-3:  0.75rem;  /* 12px */
  --cc-space-4:  1rem;     /* 16px */
  --cc-space-5:  1.5rem;   /* 24px */
  --cc-space-6:  2rem;     /* 32px */
  --cc-space-7:  3rem;     /* 48px */
  --cc-space-8:  4rem;     /* 64px */
  --cc-space-9:  6rem;     /* 96px */
  --cc-space-10: 8rem;     /* 128px */

  /* ----------------------------------------------------------
     LAYOUT — Container widths
     ---------------------------------------------------------- */
  --cc-container-narrow: 720px;   /* Article body, forms */
  --cc-container-base:   1080px;  /* Standard page content */
  --cc-container-wide:   1280px;  /* Wide grids, listings */
  --cc-container-max:    1440px;  /* Hero sections, full-width */

  /* ----------------------------------------------------------
     RADII — Rounded corners
     ---------------------------------------------------------- */
  --cc-radius-sm: 4px;
  --cc-radius:    8px;
  --cc-radius-lg: 16px;
  --cc-radius-xl: 24px;
  --cc-radius-full: 9999px;

  /* ----------------------------------------------------------
     SHADOWS — Subtle, paper-like depth
     ---------------------------------------------------------- */
  --cc-shadow-sm: 0 1px 2px rgba(58, 63, 71, 0.06);
  --cc-shadow:    0 2px 8px rgba(58, 63, 71, 0.08);
  --cc-shadow-lg: 0 8px 24px rgba(58, 63, 71, 0.12);
  --cc-shadow-xl: 0 16px 48px rgba(58, 63, 71, 0.16);

  /* ----------------------------------------------------------
     BORDERS
     ---------------------------------------------------------- */
  --cc-border-width: 1px;
  --cc-border-width-thick: 2px;

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --cc-transition-fast: 150ms ease-out;
  --cc-transition:      250ms ease-out;
  --cc-transition-slow: 400ms ease-out;
}

/* ============================================================
   GOOGLE FONTS IMPORT
   Self-host these in production for SA load-shedding resilience.
   For now, this CDN import works fine.
   ============================================================ */

/* @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap'); */
/* Google Fonts now loaded via wp_enqueue_style in inc/enqueue.php for better performance */

/* ============================================================
   BASE RESET & DEFAULTS
   Minimal — just enough to apply the brand consistently.
   ============================================================ */

html {
  font-family: var(--cc-font-body);
  font-size: 16px;
  color: var(--cc-color-text);
  background-color: var(--cc-color-bg);
  line-height: var(--cc-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cc-font-display);
  font-weight: var(--cc-fw-semibold);
  color: var(--cc-color-heading);
  line-height: var(--cc-lh-tight);
  margin-top: 0;
}

h1 { font-size: var(--cc-fs-5xl); }
h2 { font-size: var(--cc-fs-4xl); }
h3 { font-size: var(--cc-fs-3xl); }
h4 { font-size: var(--cc-fs-2xl); }
h5 { font-size: var(--cc-fs-xl); }
h6 { font-size: var(--cc-fs-lg); }

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

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

/* Primary button utility class */
.cc-button {
  display: inline-block;
  padding: var(--cc-space-3) var(--cc-space-5);
  font-family: var(--cc-font-body);
  font-weight: var(--cc-fw-semibold);
  font-size: var(--cc-fs-base);
  color: var(--cc-color-button-text);
  background-color: var(--cc-color-button-primary);
  border: none;
  border-radius: var(--cc-radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--cc-transition-fast);
}

.cc-button:hover {
  background-color: var(--cc-color-button-primary-hover);
  color: var(--cc-color-button-text);
}

/* ============================================================
   ACCESSIBILITY NOTES
   - Slate on Bone passes WCAG AA Large + AAA Normal (8.72:1)
   - Terracotta on Bone is for HEADLINES ONLY — fails WCAG for body text
   - Never rely on colour alone (Terracotta and Olive may converge under colour blindness)
   ============================================================ */