/* ============================================================
   OLUSOLA ADEKANOLA & CO — CSS VARIABLES
   Brand: Deep Navy #00145A | Authority Red #F50000 | Black #000000
   Typography: Cormorant Garamond / Cinzel / Crimson Pro
   ============================================================ */

:root {
  /* ── Brand Colours ── */
  --navy:        #00145A;
  --navy-90:     #001470;
  --navy-mid:    #0a1f6e;
  --navy-light:  #0d2484;
  --red:         #F50000;
  --red-dark:    #c00000;
  --red-muted:   rgba(245, 0, 0, 0.08);
  --black:       #000000;
  --off-black:   #111827;

  /* ── Group Ecosystem Colours ── */
  --group-blue:  #5C6C94;
  --group-light: #AAB4C8;

  /* ── Neutral Palette ── */
  --white:       #FFFFFF;
  --off-white:   #F8F8FA;
  --grey-50:     #F4F5F7;
  --grey-100:    #E8E9EC;
  --grey-200:    #D1D3D9;
  --grey-400:    #9CA0AC;
  --grey-600:    #5C6070;
  --grey-800:    #2E3140;

  /* ── Dark Section ── */
  --dark-bg:     #050D2E;
  --dark-bg-2:   #0a1540;

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-label:   'Cinzel', 'Times New Roman', serif;
  --font-body:    'Crimson Pro', Georgia, serif;

  /* ── Type Scale ── */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1.0625rem; /* 17px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   2rem;      /* 32px */
  --text-4xl:   2.75rem;   /* 44px */
  --text-5xl:   3.75rem;   /* 60px */
  --text-6xl:   5rem;      /* 80px */
  --text-7xl:   6.5rem;    /* 104px */

  /* ── Spacing ── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ── Layout ── */
  --max-width:      1280px;
  --content-width:  900px;
  --gutter:         clamp(1.25rem, 5vw, 3rem);

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,20,90,0.08), 0 1px 2px rgba(0,20,90,0.04);
  --shadow-md:  0 4px 16px rgba(0,20,90,0.10), 0 2px 6px rgba(0,20,90,0.06);
  --shadow-lg:  0 12px 40px rgba(0,20,90,0.14), 0 4px 12px rgba(0,20,90,0.08);

  /* ── Transitions ── */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --duration-fast: 150ms;
  --duration:      260ms;
  --duration-slow: 450ms;

  /* ── Nav ── */
  --nav-height: 72px;
}