:root {
  /* ========== BRAND COLORS ========== */
  --color-primary: #30c193;
  /* --color-primary: #4caf50; */
  --color-primary-soft: #e8f5e9;
  --color-accent: #ff6b6b;

  /* ========== NEUTRALS ========== */
  --color-bg: #f9f9f9;
  --color-surface: #ffffff;
  --color-text: #333;
  --color-text-muted: #6b7280;

  /* ========== FOOTER ========== */
  --color-footer-bg: #0f172a;
  --color-footer-text: #e5e7eb;
  --color-footer-muted: #9ca3af;

  /* ========== SPACING ========== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* ========== RADIUS ========== */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 10px 24px rgba(0,0,0,.12);
}


:root {
  /* =====================================================
     BRAND CORE (REFINED)
  ===================================================== */
  --brand-blue: #1e6fe8;
  --brand-blue-dark: #1658b8;
  --brand-blue-soft: rgba(30, 111, 232, 0.12);

  --brand-green: #2fa84f;
  --brand-green-dark: #238a40;
  --brand-green-soft: rgba(47, 168, 79, 0.12);

  /* =====================================================
     TEXT
  ===================================================== */
  --text-primary: #1a1a1a;
  --text-secondary: #444;
  --text-muted: #777;

  --text-on-blue: #ffffff;
  --text-on-dark: #eaeaea;

  /* =====================================================
     BACKGROUNDS
  ===================================================== */
  --bg-page: #ffffff;
  --bg-section: #fafafa;
  --bg-card: #ffffff;

  --border-soft: #e6e6e6;

  /* =====================================================
     GRADIENTS
  ===================================================== */

  /* Hero / page headers */
  --gradient-hero: linear-gradient(
    180deg,
    var(--brand-blue),
    var(--brand-blue-dark)
  );

  /* Warm kindergarten cards */
  --gradient-warm-card: linear-gradient(
    135deg,
    #fff0ec,
    #fff7e6
  );

  /* Soft blue background */
  --gradient-blue-soft: linear-gradient(
    135deg,
    rgb(30 111 232 / 18%),
    rgb(30 111 232 / 6%)
  );

  /* Title underline / divider */
  --gradient-brand-line: linear-gradient(
    90deg,
    var(--brand-blue),
    var(--brand-green)
  );

  /* =====================================================
     COMPONENTS
  ===================================================== */
  --card-radius: 16px;
  --card-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.15);

  --btn-primary-bg: var(--brand-green);
  --btn-primary-bg-hover: var(--brand-green-dark);
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: var(--brand-blue);
  --btn-secondary-bg-hover: var(--brand-blue-dark);
  --btn-secondary-text: #ffffff;

  /* =====================================================
     FOOTER
  ===================================================== */
  --footer-bg: #0e1629;
  --footer-text: #eaeaea;
  --footer-muted: #aab0c0;
}

/* Final branding color to adopt */
:root {
  /* =====================================================
     BRAND CORE (LOGO-DRIVEN)
  ===================================================== */
  --brand-primary: #1554ae;        /* Logo blue */
  --brand-primary-dark: #0f3f87;   /* Darker for gradients / hover */
  --brand-primary-soft: rgba(21, 84, 174, 0.12);

  --brand-secondary: #253147;      /* Deep navy / trust */
  --brand-accent: #390102;         /* Heritage maroon (rare use) */

  /* =====================================================
     TEXT COLORS (ACCESSIBLE)
  ===================================================== */
  --text-primary: #111827;         /* Main body text */
  --text-secondary: #374151;       /* Paragraphs */
  --text-muted: #6b7280;           /* Meta text */

  --text-on-primary: #ffffff;      /* On blue */
  --text-on-dark: #e5e7eb;         

  /* =====================================================
     BACKGROUNDS
  ===================================================== */
  --bg-page: #ffffff;
  --bg-section: #f8fafc;
  --bg-card: #ffffff;

  --border-soft: #e5e7eb;

  /* =====================================================
     GRADIENTS (USED CAREFULLY)
  ===================================================== */
  --gradient-hero: linear-gradient(
    180deg,
    var(--brand-primary),
    var(--brand-primary-dark)
  );

  --gradient-soft-blue: linear-gradient(
    135deg,
    rgba(21, 84, 174, 0.12),
    rgba(21, 84, 174, 0.04)
  );

  --gradient-title-line: linear-gradient(
    90deg,
    var(--brand-primary),
    #7aa7e6
  );

  /* =====================================================
     COMPONENT TOKENS
  ===================================================== */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  --shadow-md: 0 10px 24px rgba(0,0,0,.12);
  --shadow-hover: 0 16px 36px rgba(0,0,0,.16);

  /* =====================================================
     BUTTONS
  ===================================================== */
  --btn-primary-bg: var(--brand-primary);
  --btn-primary-bg-hover: var(--brand-primary-dark);
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: var(--brand-secondary);
  --btn-secondary-text: #ffffff;

  /* =====================================================
     FOOTER
  ===================================================== */
  --footer-bg: #0b1220;
  --footer-text: #e5e7eb;
  --footer-muted: #9ca3af;
}



/* ================= GLOBAL STYLES ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  /* added to fix footer */
  height: 100%;
}

body {
  /* added to fix footer */
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* Existing */
  font-family: system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

main {
  /* push footer down */
  flex: 1;
}

/* ================= SKELETON BASE ================= */
.skeleton {
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f3f4f6 37%,
    #e5e7eb 63%
  );
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

/* ================= SKELETON VARIANTS ================= */
.skeleton-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.skeleton-text {
  height: 14px;
  margin-top: 0.5rem;
}

.skeleton-title {
  height: 18px;
  width: 70%;
  margin-top: 0.75rem;
}