/* ==========================================================
   ESCOLA BATISTA VIDA PLENA — Design Tokens
   Paleta: Azul #0c3e80 | Amarelo #f7de33 | Roxo #4c219f
   Fontes: the-mezirane (display) | Fredoka (corpo)
   ========================================================== */

/* ── @font-face ─────────────────────────────────────────── */


@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fredoka';
  src: url('../assets/fonts/Fredoka-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-primary:      #0c3e80;   /* Azul principal */
  --color-primary-dark: #082d5e;   /* Azul escuro */
  --color-primary-light:#1a5cae;   /* Azul claro */
  --color-accent:       #f7de33;   /* Amarelo destaque */
  --color-accent-dark:  #ffe948;   /* Amarelo hover iluminado */
  --color-purple:       #4c219f;   /* Roxo */
  --color-purple-light: #6c3fc0;   /* Roxo claro */
  --color-white:        #ffffff;
  --color-off-white:    #f5f7fb;
  --color-gray-light:   #e8ecf4;
  --color-gray:         #8a94a8;
  --color-gray-dark:    #3d4457;
  --color-text:         #1a2340;
  --color-text-light:   #4a5568;

  /* Typography */
  --font-display: 'Fredoka', 'Segoe UI', sans-serif;
  --font-body:    'Fredoka', 'Segoe UI', sans-serif;

  /* Font sizes */
  --fs-xs:   0.75rem;    /*  12px */
  --fs-sm:   0.875rem;   /*  14px */
  --fs-base: 1rem;       /*  16px */
  --fs-md:   1.125rem;   /*  18px */
  --fs-lg:   1.25rem;    /*  20px */
  --fs-xl:   1.5rem;     /*  24px */
  --fs-2xl:  2rem;       /*  32px */
  --fs-3xl:  2.5rem;     /*  40px */
  --fs-4xl:  3rem;       /*  48px */
  --fs-5xl:  3.75rem;    /*  60px */
  --fs-hero: 5rem;       /*  80px */

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed:1.7;

  /* Spacing scale */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 4px rgba(12,62,128,0.08);
  --shadow-md:  0 4px 16px rgba(12,62,128,0.12);
  --shadow-lg:  0 8px 32px rgba(12,62,128,0.18);
  --shadow-xl:  0 16px 48px rgba(12,62,128,0.22);
  --shadow-card:0 4px 20px rgba(12,62,128,0.10);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Layout */
  --container-max: 1200px;
  --header-height: 76px;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-light) 100%);
  --gradient-purple:  linear-gradient(135deg, var(--color-purple) 0%, var(--color-primary) 100%);
  --gradient-hero:    linear-gradient(135deg, #051f40 0%, var(--color-primary) 60%, var(--color-purple) 100%);
  --gradient-card:    linear-gradient(180deg, transparent 0%, rgba(12,62,128,0.85) 100%);
}