/* ============================================================
   MAXIMISE AV DESIGN SYSTEM
   ------------------------------------------------------------
   This file controls the ENTIRE appearance of the website.

   Want a new colour?
   Change it here.

   Want rounded corners?
   Change them here.

   Want different fonts?
   Change them here.

   Everything else references these variables.

   ============================================================ */

:root{

    /* ========================================================
       BRAND COLOURS
       ======================================================== */

    --primary: #ff4001;
    --primary-hover: #d45731;

    --background: #000000;
    --background-light: #181818;

    --surface: #202020;
    --surface-hover: #2b2b2b;

    --white: #ffffff;
    --off-white: #f4f4f4;

    --grey: #c9c9c9;
    --grey-dark: #888888;

    --border: rgba(255,255,255,0.08);

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

    --heading-font: "Poppins", sans-serif;
    --body-font: "Inter", sans-serif;

    /* Font Sizes */

    --font-hero: clamp(3rem,7vw,6rem);

    --font-h1: clamp(2.5rem,5vw,4rem);

    --font-h2: clamp(2rem,4vw,3rem);

    --font-h3: 1.5rem;

    --font-body:1rem;

    --font-small:0.9rem;

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

    --section-padding:120px;

    --page-width:1300px;

    --card-padding:40px;

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

    --radius-small:8px;

    --radius:16px;

    --radius-large:28px;

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

    --shadow-small:
    0px 10px 30px rgba(0,0,0,0.18);

    --shadow-large:
    0px 25px 80px rgba(0,0,0,0.35);

    /* ========================================================
       ANIMATIONS
       ======================================================== */

    --transition-fast:0.25s;

    --transition:0.45s;

    --transition-slow:0.8s;

}