/*
 * ============================================================
 *  EVA — BASE
 *  Contains: CSS custom properties, reset, root typography
 * ============================================================
 */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Brand colours */
  --clr-primary:        #5C1F20;
  --clr-primary-dark:   #3D1010;
  --clr-primary-deeper: #2A1010;
  --clr-secondary:      #8B2E2E;
  --clr-accent:         #B85C2A;
  --clr-gold:           #C8933A;
  --clr-gold-hover:     #d4a44e;
  --clr-gold-dark:      #a07030;

  /* Surface colours */
  --clr-light:          #F5EDE0;
  --clr-muted-bg:       #EDD9C0;
  --clr-white:          #ffffff;
  --clr-body-bg:        #ffffff;

  /* Text colours */
  --clr-dark:           #2A1010;
  --clr-muted:          #6B4040;

  /* Alpha tokens — white */
  --clr-white-05:       rgba(255, 255, 255, 0.05);
  --clr-white-08:       rgba(255, 255, 255, 0.08);
  --clr-white-12:       rgba(255, 255, 255, 0.12);
  --clr-white-55:       rgba(255, 255, 255, 0.55);
  --clr-white-60:       rgba(255, 255, 255, 0.60);
  --clr-white-65:       rgba(255, 255, 255, 0.65);
  --clr-white-75:       rgba(255, 255, 255, 0.75);
  --clr-white-80:       rgba(255, 255, 255, 0.80);
  --clr-white-85:       rgba(255, 255, 255, 0.85);

  /* Alpha tokens — primary */
  --clr-primary-08:     rgba(92, 31, 32, 0.08);
  --clr-primary-10:     rgba(92, 31, 32, 0.10);
  --clr-primary-12:     rgba(92, 31, 32, 0.12);
  --clr-primary-13:     rgba(92, 31, 32, 0.13);
  --clr-primary-15:     rgba(92, 31, 32, 0.15);
  --clr-primary-30:     rgba(92, 31, 32, 0.30);

  /* Alpha tokens — gold */
  --clr-gold-07:        rgba(200, 147, 58, 0.07);
  --clr-gold-12:        rgba(200, 147, 58, 0.12);
  --clr-gold-30:        rgba(200, 147, 58, 0.30);
  --clr-gold-40:        rgba(200, 147, 58, 0.40);
  --clr-gold-50:        rgba(200, 147, 58, 0.50);

  /* Alpha tokens — dark overlay */
  --clr-overlay-hero:   rgba(42, 16, 16, 0.88);
  --clr-overlay-mid:    rgba(92, 31, 32, 0.45);
  --clr-overlay-card:   rgba(42, 16, 16, 0.75);

  /* Badge surface colours */
  --clr-badge-creche-bg:     #f5e6d6;
  --clr-badge-creche-text:   #7a3010;
  --clr-badge-nursery-bg:    #f0dbc4;
  --clr-badge-nursery-text:  #8b4513;
  --clr-badge-primary-bg:    #e8d0b8;
  --clr-badge-primary-text:  #5c1f20;
  --clr-badge-secondary-bg:  #dfc4a0;
  --clr-badge-secondary-text:#4a1a00;

  /* Event tag colours */
  --clr-tag-academic-bg:  #e8d0b8;
  --clr-tag-academic-txt: #5c1f20;
  --clr-tag-sports-bg:    #d4e8d0;
  --clr-tag-sports-txt:   #166534;
  --clr-tag-holiday-bg:   #f5e0d0;
  --clr-tag-holiday-txt:  #8b2e2e;
  --clr-tag-cultural-bg:  #f0e0c0;
  --clr-tag-cultural-txt: #7a3010;
  --clr-tag-exam-bg:      #e8d8f0;
  --clr-tag-exam-txt:     #5b21b6;

  /* Typography */
  --ff-display: 'Playfair Display', serif;
  --ff-body:    'DM Sans', sans-serif;
  --ff-serif:   'Crimson Pro', serif;

  /* Motion */
  --transition-base:  0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.6s ease;

  /* Spacing scale */
  --section-padding-y: 2rem;

  /* Radius */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-pill: 30px;

  /* Shadows */
  --shadow-card:  0 12px 36px var(--clr-primary-13);
  --shadow-card-hover: 0 24px 48px var(--clr-primary-15);
  --shadow-nav:   0 2px 24px var(--clr-primary-12);
}


/* ── RESET & BASE ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--ff-body);
  background-color: var(--clr-body-bg);
  color: var(--clr-dark);
  overflow-x: hidden;
}

a {
  text-decoration: none !important;
}

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

img {
  max-width: 100%;
  display: block;
}


/* ── GLOBAL TYPOGRAPHY HELPERS ─────────────────────────────── */
/*
 * These are site-wide typographic atoms used in section headers
 * across every page. Kept in base so any page can use them
 * without importing components.css.
 */

.eva-section-label {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-gold);
}

.eva-section-title {
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  color: var(--clr-primary);
  line-height: 1.2;
}

/* Modifier: white variant used on dark backgrounds */
.eva-section-title--light {
  color: var(--clr-white);
}

.eva-divider {
  width: 56px;
  height: 4px;
  background: var(--clr-gold);
  border-radius: var(--radius-sm);
  margin: 0.6rem 0 1.4rem;
}

/* Modifier: centred (e.g. section intros) */
.eva-divider--center {
  margin-left: auto;
  margin-right: auto;
}

/*
 * ============================================================
 *  EVA — UTILITIES
 *  Contains: spacing helpers, colour overrides, misc helpers
 * ============================================================
 */

/* Section padding (applied to <section> elements) */
.eva-section {
  padding: var(--section-padding-y) 0;
}

.eva-section--light {
  background: var(--clr-light);
}

.eva-section--white {
  background: var(--clr-white);
}

/* Body text styles */
.eva-body-text {
  color: var(--clr-muted);
  line-height: 1.8;
  font-size: 0.95rem;
}