:root {

    /* =============================================
       BRAND COLOURS — AFORS family sites
       ============================================= */

    --brand-blue: #029ee3;
    --brand-red: #ef242e;


    /* =============================================
       COLOUR PALETTE
       General-purpose scale to draw from in theme.css.
       Not tied to any component.
       ============================================= */

    --zinc-50:  #FAFAFA;
    --zinc-100: #F4F4F5;
    --zinc-200: #E4E4E7;
    --zinc-250: #D9D9DC;
    --zinc-300: #D4D4D8;
    --zinc-350: #C1C1C8;
    --zinc-400: #A1A1AA;
    --zinc-500: #71717A;
    --zinc-600: #52525B;
    --zinc-700: #3F3F46;
    --zinc-800: #2C2C31;
    --zinc-850: #1F1F23;
    --zinc-900: #18181B;
    --zinc-950: #09090B;

    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --blue-900: #1e3a8a;

    --navy-100: #E8ECF2;
    --navy-200: #C8D0DC;
    --navy-300: #A3B0C4;
    --navy-400: #7A8FA8;
    --navy-500: #546E8A;
    --navy-600: #3B5070;
    --navy-700: #2B3A55;
    --navy-800: #222D42;
    --navy-900: #1C222E;

    --red-100:  #ffe4e6;
    --red-500:  #ef4444;
    --red-700:  #b91c1c;
    --red-900:  #7f1d1d;

    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;

    --amber-100: #fef3c7;
    --amber-500: #f59e0b;
    --amber-600: #d97706;

    --teal-500:  #14b8a6;
    --teal-600:  #0d9488;

    --purple-500: #a855f7;
    --purple-600: #9333ea;

    --white: #ffffff;
    --black: #000000;


    /* =============================================
       TYPOGRAPHY
       ============================================= */

    --font-size-xs:   0.75rem;    /* 12px */
    --font-size-sm:   0.875rem;   /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg:   1.25rem;    /* 20px */
    --font-size-xl:   1.5rem;     /* 24px */
    --font-size-h3:   1.25rem;
    --font-size-h2:   2.25rem;
    --font-size-h1:   2.5rem;


    /* =============================================
       SPACING / GAP
       ============================================= */

    --gap-xs:  2px;
    --gap-sm:  3px;
    --gap-md:  5px;
    --gap-lg:  7px;
    --gap-xl:  10px;
    --gap-2xl: 16px;
    --gap-3xl: 24px;


    /* =============================================
       SHADOWS
       ============================================= */

    --shadow-sm:    0.25em 0.25em 0.75em rgba(0, 0, 0, 0.15),
    0.125em 0.125em 0.25em rgba(0, 0, 0, 0.10);

    --shadow-md:    0.25em 0.25em 0.75em rgba(0, 0, 0, 0.25),
    -0.125em 0.125em 0.25em rgba(0, 0, 0, 0.25);

    --shadow-lg:    0.5em 0.5em 1em rgba(0, 0, 0, 0.75),
    -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.50);

    --shadow-left:  -2px 0px 4px 0px rgba(0, 0, 0, 0.25);
    --shadow-right:  2px 0px 4px 0px rgba(0, 0, 0, 0.25);

    --shadow-inset:  0px  4px 4px 0px rgba(0, 0, 0, 0.25) inset,
    0px -4px 4px 0px rgba(0, 0, 0, 0.25) inset;


    /* =============================================
       BORDERS
       ============================================= */

    --border-shadow-colour:           rgba(24, 24, 24, 0.18);
    --border-highlight-colour:        rgba(255, 255, 255, 0.80);
    --border-highlight-accent-colour: rgba(255, 255, 255, 0.30);

    --border-shadow:           solid 1px var(--border-shadow-colour);
    --border-highlight:        solid 1px var(--border-highlight-colour);
    --border-highlight-accent: solid 1px var(--border-highlight-accent-colour);
    --border-groove:           groove 2px var(--border-highlight-colour);

}