:root {
    /* Zinc Colours */
    --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;

    /* AFORS LOGO colours */
    --afors-blue: #0298DE;
    --afors-red: #D8334A;

    /* flyins colours */
    --flyins-red: rgb(199 17 17 / 20%);

    /* Text Colours */
    --primary-text: var(--zinc-950);
    --secondary-text: var(--zinc-700);
    --primary-contrast-text: var(--zinc-50);
    --flyins-logo-text: var(--zinc-400);
    --primary-links: var(--zinc-700);
    --danger-text: #CE3636;

    --event-text: #262626;
    --calender-emboss-clr: var(--zinc-350);

    /* Text Shadows */
    --calendar-emboss-ts: 0 1px 0 rgb(250, 250, 250), 0 -1px 0 rgba(51, 51, 51, 0.7);

    /* Backgrounds */
    --body-bg: var(--zinc-350);
    --component-bg: var(--zinc-200);
    --component-shadow-bg: var(--zinc-200);
    --panel-bg: var(--zinc-350);
    --component-notch: var(--zinc-400);
    --header-bg: var(--zinc-400);
    --accent-bg: #8fcaf4;
    --menu-bg: #1C222E;
    --dotted-bg: rgba(23, 23, 23, 0.3);
    --ticket-bg: var(--zinc-250);
    --component-lighter-bg: var(--zinc-100);

    --calendar-day-prev-bg: #E8E9E9;
    --calendar-event-bg: #5ED6D6;
    --calendar-event-focus-bg: #5dbfbf;

    --grid-odd-bg: var(--zinc-200);
    --grid-even-bg: var(--zinc-300);

    /* Hovers */
    --component-hover: var(--zinc-300);
    --panel-hover: var(--zinc-400);
    --accent-hover: #7cb3da;

    /* Buttons */
    --primary-btn-bg: #50b2dd;
    --primary-btn-focus-bg: #4dacd6;
    --primary-btn-active: #4dacd6;

    --secondary-btn-bg: #1e6faa;
    --secondary-btn-focus-bg: #165583;

    --inactive-btn-bg: var(--zinc-400);
    --inactive-btn-focus: var(--zinc-500);

    --success-btn-bg: #65c814;
    --success-btn-focus-bg: #50A40C;

    --danger-btn-bg: #f44848;
    --danger-btn-focus-bg: #FE3535;

    --cta-btn-bg-before: rgba(56, 117, 140, 0.32);
    --cta-btn-grad-after: linear-gradient(92.83deg, #3f8eac 0, #1e78ba 100%);
    --cta-btn-grad-active: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #3f8eac 0, #1e78ba 100%);

    --btn-white-bg: var(--zinc-50);
    --btn-white-foucs: #ffffff;

    /* Links */
    --primary-link-clr: var(--zinc-850);
    --primary-link-bg: var(--zinc-350);
    --primary-link-text-shadow: 1px 1px var(--zinc-50);

    /* Forms */
    --form-input-bg: var(--zinc-100);
    --form-input-focus-bg: var(--zinc-50);
    --form-input-border: #b6b6b9;

    --form-submit-btn-bg: #8AE734;
    --form-submit-btn-clr: var(--zinc-850);

    /* Font Size */
    --fs-h1: 2.5rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.25rem;
    --fs-body: 1rem;
    --fs-small: 0.75rem;


    /* Box Shaddows */
    --bs: 0.25em 0.25em 0.75em rgba(0, 0, 0, .25),
    -0.125em 0.125em 0.25em rgba(0, 0, 0, .25);

    --bs-light: 0.25em 0.25em 0.75em rgba(0, 0, 0, .15),
    0.125em 0.125em 0.25em rgba(0, 0, 0, .10);

    --bs-heavy: 0.5em 0.5em 1em rgba(0, 0, 0, .75),
    -0.25em 0.25em 0.5em rgba(0, 0, 0, .50);

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

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

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

    --bs-inset-ticket: 0px -4px 4px 3px rgba(0, 0, 0, 0.1) inset,
                       0px -2px 8px 4px rgba(0, 0, 0, 0) inset;

    /*  Borders  */
    --border-shadow-clr: rgba(24,24,24,0.18);
    --border-highlight-clr: rgba(255,255,255,0.8);
    --border-highlight-accent-clr: rgba(255,255,255,0.3);

    --border-shadow: solid 1px var(--border-shadow-clr);
    --border-highlight: solid 1px var(--border-highlight-clr);
    --border-highlight-accent: solid 1px var(--border-highlight-accent-clr);

    --border-form-input: solid 1px var(--zinc-500);

    --border-menu-shadow: solid 1px rgba(24, 24, 24, .9);
    --border-menu-highlight: solid 1px rgba(255,255,255,0.10);

    --border-groove: groove 2px var(--border-highlight-clr);


    /* Gap */
    --gap-xlarge: 10px;
    --gap-large: 7px;
    --gap-regular: 5px;
    --gap-small: 3px;
    --gap-xsmall: 2px;

    /* Labels */

    --label-text: var(--zinc-50);
    --label-text-contrast: var(--zinc-950);

    --label-scheduled: #81f381;
    --label-cancelled: #F35044;
    --label-postponed: #5E82F7;
    --label-draft: var(--zinc-500);

    --label-default: #85CFEA;
    --label-flyin: #DF586A;
    --label-airrace: #F5E960;
    --label-drone: #55D6C2;
    --label-competition: #AFA6C9;
    --label-airshow: #82AEDE;
    --label-flypast: #F56476;
    --label-openday: #90c64b;
    --label-tradeshow: #E84FBF;
    --label-record: #6fdde4;
    --label-charity: #DBB21F;
    --label-youth: #36D3C1;
    --label-conference: #F7996E;
    --label-education: #05EB93;
    --label-music: #FC6F3B;

    /* Statuses */
    --pending-bg: #f6ec94;
    --pending-clr: var(--zinc-900);

    --confirmed-bg: #b1ebb1;
    --confirmed-clr: var(--zinc-900);

    --cancelled-bg: #fbabab;
    --cancelled-clr: var(--zinc-900);

    --refunded-bg: #fbabab;
    --refunded-clr: var(--zinc-900);




    /*  Menu Duotone Icons */
    --fa-secondary-opacity: .4;
    --icon-user: #5ca357;
    --icon-home: #3e5e8a;
    --icon-user-gear: #7a314d;
    --icon-heart: #b11e1e;
    --icon-ticket-airline: #765bb8;
    --icon-plane-arrival: #e65a00;
    --icon-sitemap: #dba21b;
    --icon-question: #2e7232;
    --icon-envelope: #1564a8;
    --icon-user-pen: #3d78bb;
    --icon-right-from-bracket: #cc1955;
    --icon-right-to-bracket: #89229c;
    --icon-megaphone: #7dd008;
    --icon-cards: #00d08b;
    --icon-lock-forgot-password: #d8362a;
    --icon-lock-forgot-username: #36439d;



    --font-size-small: .75rem;

}

@media (prefers-color-scheme: dark) {
    :root {
        /* DARK Colours */

        /* Text Colours */
        --primary-text: var(--zinc-50);
        --secondary-text: var(--zinc-400);
        --primary-contrast-text: var(--zinc-950);
        --primary-links: var(--zinc-500);
        --danger-text: #C54F4F;
        --calender-emboss-clr: var(--zinc-900);


        /* Text Shadows */
        --calendar-emboss-ts: 0 1px 0 rgba(140, 137, 137, 0.3), 0 -1px 0 rgba(0, 0, 0, .7);


        /* Backgrounds */
        --body-bg: #000000;
        --component-bg: var(--zinc-800);
        --component-shadow-bg: var(--zinc-700);
        --panel-bg: var(--zinc-900);
        --component-notch: var(--zinc-950);
        --header-bg: var(--zinc-700);
        --accent-bg: #0b4c79;
        --dotted-bg: rgba(192, 192, 192, 0.3);
        --ticket-bg: var(--zinc-800);
        --calendar-day-prev-bg: #373737;
        --component-lighter-bg: var(--zinc-700);

        --slider-bg: var( --flyins-red);

        --grid-odd-bg: var(--zinc-700);
        --grid-even-bg: var(--zinc-800);


        /* Hovers */
        --component-hover: var(--zinc-950);
        --panel-hover: var(--zinc-950);
        --accent-hover: #094168;


        /* Buttons */
        --primary-btn-bg: #227d91;
        --primary-btn-focus-bg: #238094;
        --primary-btn-active: #1f7689;

        --secondary-btn-bg: #165583;
        --secondary-btn-focus-bg: #0d3d70;

        --inactive-btn-bg: var(--zinc-850);
        --inactive-btn-focus: var(--zinc-900);

        --success-btn-bg: #50A40C;
        --success-btn-focus-bg: #3d7e09;

        --danger-btn-bg: #FE3535;
        --danger-btn-focus-bg: #EC1313;

        --cta-btn-grad-after: linear-gradient(92.83deg, #306e85 0, #165583 100%);
        --cta-btn-grad-active: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #306e85 0, #165583 100%);


        /* Links */
        --primary-link-clr: var(--zinc-250);
        --primary-link-bg: var(--zinc-900);
        --primary-link-text-shadow: 1px 1px var(--zinc-950);

        /* Box Shadows */
        /* --bs = --bs-heavy for dark mode */
        --bs: 0.5em 0.5em 1em rgba(0, 0, 0, .75),
        -0.25em 0.25em 0.5em rgba(0, 0, 0, .50);
        --bs-inset-ticket: 0px -4px 4px 3px rgba(0, 0, 0, 0.15) inset,
                           0px -2px 8px 4px rgba(0, 0, 0, 0) inset;


        /*  Borders  */
        --border-shadow-clr: rgba(24, 24, 24, .8);
        /*--border-highlight-clr: rgba(255,255,255,0.06);*/
        --border-highlight-clr: rgba(255,255,255,0.18);

        --border-shadow: solid 1px var(--border-shadow-clr);
        --border-highlight: solid 1px rgba(255,255,255,0.06);
        --border-highlight-accent: solid 1px var(--border-highlight-clr);

        --border-groove: groove 2px var(--border-shadow-clr);


        /* Forms */
        --form-input-bg: var(--zinc-800);
        --form-input-focus-bg: var(--zinc-700);
        --form-input-border: #434343;


        /* Labels */
        --label-scheduled: #337925;
        --label-cancelled: #D31B0D;
        --label-postponed: #1045F4;

        --label-default: #3891b1;
        --label-flyin: #CE273D;
        --label-airrace: #756C0B;
        --label-drone: #1D776A;
        --label-competition: #6B5B95;
        --label-airshow: #2F6EB1;
        --label-flypast: #D80E25;
        --label-openday: #32770D;
        --label-tradeshow: #C21995;
        --label-record: #06777F;
        --label-charity: #816912;
        --label-youth: #1A7A6F;
        --label-conference: #B8410A;
        --label-education: #037248;
        --label-music: #C90380;

        /* Menu Duotone Icons */
        --fa-secondary-opacity: .2;
        --icon-user: #b2ffb5;
        --icon-home: #657fc0;
        --icon-user-gear: #a25874;
        --icon-heart: #e54f4f;
        --icon-ticket-airline: #a798e0;
        --icon-plane-arrival: #ff8b33;
        --icon-sitemap: #fcd94b;
        --icon-question: #57a157;
        --icon-envelope: #4a8bd7;
        --icon-user-pen: #6aa6ea;
        --icon-right-from-bracket: #f05880;
        --icon-right-to-bracket: #b044c1;
        --icon-megaphone: #a7f84f;
        --icon-cards: #33ffc2;
        --icon-lock-forgot-password: #f66b5a;
        --icon-lock-forgot-username: #5f6cd0;
    }
}