/* ================================================================
   DESIGN TOKENS — La Salle College
   lasallecollege.ac.ke
   Single source of truth for all colour, type, space, radius values
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Colour palette */
  --c-navy:          #011550;
  --c-navy-mid:      #0d2060;
  --c-navy-light:    #1b2c65;
  --c-crimson:       #9e1b32;
  --c-crimson-dark:  #7a1226;
  --c-coral:         #ff6178;
  --c-gold:          #f4bf44;
  --c-white:         #ffffff;
  --c-surface:       #faf8ff;
  --c-surface-2:     #f3f2ff;
  --c-surface-3:     #ebedff;
  --c-surface-4:     #dce1ff;
  --c-ink:           #121a37;
  --c-ink-muted:     #454650;
  --c-ink-faint:     #757681;
  --c-border:        #c5c5d1;
  --c-border-light:  rgba(197,197,209,0.4);

  /* Typography */
  --f-display: 'Plus Jakarta Sans', sans-serif;
  --f-body:    'Inter', sans-serif;

  /* Type scale */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.5rem;     /* 24px */
  --fs-xl:   2rem;       /* 32px */
  --fs-2xl:  2.5rem;     /* 40px */
  --fs-3xl:  3rem;       /* 48px */
  --fs-4xl:  3.5rem;     /* 56px */

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.75;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.12em;
  --ls-widest:  0.2em;

  /* Spacing scale (8px base) */
  --sp-1:   0.5rem;    /* 8px  */
  --sp-2:   1rem;      /* 16px */
  --sp-3:   1.5rem;    /* 24px */
  --sp-4:   2rem;      /* 32px */
  --sp-5:   2.5rem;    /* 40px */
  --sp-6:   3rem;      /* 48px */
  --sp-8:   4rem;      /* 64px */
  --sp-10:  5rem;      /* 80px */
  --sp-12:  6rem;      /* 96px */
  --sp-16:  8rem;      /* 128px */

  /* Section rhythm */
  --section-v: 7.5rem;   /* 120px */
  --section-v-sm: 5rem;  /* 80px */

  /* Container */
  --container: 1280px;
  --gutter-desk: 4rem;
  --gutter-mob:  1.25rem;

  /* Border radius */
  --r-sm:   0.375rem;   /* 6px  */
  --r-md:   0.875rem;   /* 14px */
  --r-lg:   1.375rem;   /* 22px */
  --r-xl:   2rem;       /* 32px */
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(1,21,80,0.06);
  --shadow-md:  0 4px 24px rgba(1,21,80,0.10);
  --shadow-lg:  0 8px 48px rgba(1,21,80,0.14);
  --shadow-navy: 0 6px 32px rgba(1,21,80,0.22);

  /* Transitions */
  --ease: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --ease-bounce: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}