/* ════════════════════════════════════════════════════════════
   VARIABLES.CSS — Global Design Tokens & Base
   Oxford International Pre-School
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --sun:           #F5C800;
  --sun-deep:      #E8B000;
  --sun-pale:      #FFF8D0;
  --navy:          #0F1B3D;
  --navy-mid:      #1E2F5E;
  --navy-soft:     #2D4080;
  --coral:         #FF6B4A;
  --mint:          #3ECFB2;
  --lavender:      #9B8BF4;
  --sky:           #4BBFFF;
  --white:         #FFFFFF;
  --cream:         #FFFDF0;

  /* ── Text Colors ── */
  --text:          #0F1B3D;
  --text-soft:     #4A5578;

  /* ── Typography — Font Families ── */
  --font-display:  'Fraunces', serif;
  --font-heading:  'Baloo 2', sans-serif;
  --font-body:     'DM Sans', sans-serif;

  /* ── Easing ── */
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layout ── */
  --nav-height:    80px;
  --section-pad:   100px 64px;
  --section-pad-tab: 80px 32px;
  --section-pad-mob: 60px 24px;
}


/* ════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size:       16px;
}

body {
  font-family: var(--font-body);
  color:       var(--text);
  background:  var(--cream);
  overflow-x:  hidden;
}