/* ============================================================
   BLESSED GROUP OF SCHOOLS — Design Tokens
   Brand: Royal Blue + Gold | Inspired by school logo & flyers
   ============================================================ */

:root {

  /* ── Brand Colors (from official logo & flyers) ── */
  --color-blue-900:  #0A1A4E;
  --color-blue-800:  #0D2268;
  --color-blue-700:  #1535A8;
  --color-blue-600:  #1A3FC8;
  --color-blue-500:  #2952E0;   /* primary */
  --color-blue-400:  #4D74FF;
  --color-blue-300:  #7B9BFF;
  --color-blue-200:  #B8CAFE;
  --color-blue-100:  #E4ECFF;
  --color-blue-50:   #F0F4FF;

  --color-gold-700:  #8B5A00;
  --color-gold-600:  #B87900;
  --color-gold-500:  #E09500;
  --color-gold-400:  #F5A623;   /* accent */
  --color-gold-300:  #FAC35A;
  --color-gold-200:  #FDE29B;
  --color-gold-100:  #FEF4D6;
  --color-gold-50:   #FFFBEC;

  /* Semantic */
  --color-brand-primary:       var(--color-blue-500);
  --color-brand-primary-dark:  var(--color-blue-800);
  --color-brand-primary-light: var(--color-blue-100);
  --color-brand-accent:        var(--color-gold-400);
  --color-brand-accent-dark:   var(--color-gold-600);
  --color-brand-dark:          var(--color-blue-900);

  /* Neutrals */
  --color-grey-950:  #0C0F18;
  --color-grey-900:  #111827;
  --color-grey-800:  #1F2937;
  --color-grey-700:  #374151;
  --color-grey-600:  #4B5563;
  --color-grey-500:  #6B7280;
  --color-grey-400:  #9CA3AF;
  --color-grey-300:  #D1D5DB;
  --color-grey-200:  #E5E7EB;
  --color-grey-100:  #F3F4F6;
  --color-grey-50:   #F9FAFB;
  --color-white:     #FFFFFF;

  /* State */
  --color-success-600: #059669;
  --color-success-100: #D1FAE5;
  --color-error-600:   #DC2626;
  --color-error-100:   #FEE2E2;

  /* ── Typography ── */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --text-h1:       clamp(2.25rem, 5vw, 3.75rem);
  --text-h2:       clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h3:       clamp(1.375rem, 2.5vw, 2rem);
  --text-h4:       clamp(1.125rem, 2vw, 1.5rem);
  --text-h5:       1.125rem;
  --text-h6:       1rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-caption:  0.75rem;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.1em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  /* ── Spacing (4px base) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   2rem;
  --space-8:   2.5rem;
  --space-9:   3rem;
  --space-10:  4rem;
  --space-11:  5rem;
  --space-12:  6rem;
  --space-14:  8rem;

  /* ── Layout ── */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 5vw, 2rem);
  --section-py:     clamp(3.5rem, 7vw, 6rem);

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-blue: 0 8px 24px rgba(41,82,224,0.30);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ── Semantic bg/text ── */
  --color-bg-page:       var(--color-white);
  --color-bg-subtle:     var(--color-grey-50);
  --color-bg-muted:      var(--color-grey-100);
  --color-text-primary:  var(--color-grey-900);
  --color-text-secondary:var(--color-grey-600);
  --color-text-tertiary: var(--color-grey-400);
  --color-border-default:var(--color-grey-200);
  --color-border-subtle: var(--color-grey-100);
}