/* ==========================================================================
   Design tokens - every value used on the site is declared here.
   ========================================================================== */

:root {
    /* --- Colours ------------------------------------------------------ */
    --color-bg-primary: #121212;
    --color-bg-dark: #0F1617;
    --color-accent: #009CA9;
    --color-white: #FFFFFF;
    --color-text: #A4A4A4;
    --color-heading: #F8C64E;
    --color-btn-text: #FFFFFF;
    --color-card: #181818;
    --color-cold: #394950;

    --color-overlay: rgba(9, 15, 16, .74);
    --color-overlay-soft: rgba(18, 18, 18, .82);
    --color-divider: #2A3338;
    --color-focus: #F8C64E;
    --color-link: #F8C64E;
    --color-link-hover: #00C4D4;

    --gradient-primary: linear-gradient(180deg, #09272B 0%, #3E9FAD 50%, #09272B 100%);
    --gradient-secondary: linear-gradient(180deg, #0F1617 0%, #688091 51%, #2B313B 100%);
    --gradient-accent-line: linear-gradient(90deg, #F8C64E 0%, rgba(248, 198, 78, 0) 100%);

    /* --- Typography --------------------------------------------------- */
    --font-base: "Cabin", "Segoe UI", Arial, sans-serif;
    --font-display: "Norse", "Cabin", "Segoe UI", Arial, sans-serif;

    --fs-body: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
    --fs-small: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --fs-h1: clamp(2.125rem, 1.55rem + 2.6vw, 2.875rem);
    --fs-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.125rem);
    --fs-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
    --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --lh-base: 1.6;
    --lh-heading: 1.2;

    /* --- Spacing ------------------------------------------------------ */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.25rem;   /* 20px - paragraphs, grid gap, H2 -> text */
    --space-h3: 1rem;      /* 16px - H3 -> text */
    --space-faq: 0.875rem; /* 14px - between FAQ items */
    --space-lg: 1.5rem;    /* 24px - card padding */
    --space-xl: 2rem;
    --space-section: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); /* 40-60px */

    --container-max: 1440px;
    --container-pad: clamp(1rem, 0.5rem + 2vw, 2.5rem);

    /* --- Shapes ------------------------------------------------------- */
    --radius: 0;
    --cut: 16px;
    --clip-cut: polygon(100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 0);
    --border-card: none;

    /* --- Effects ------------------------------------------------------ */
    --shadow-card: 0 12px 30px rgba(0, 0, 0, .45);
    --transition: 220ms ease;
    --transition-slow: 420ms ease;

    /* --- Layers ------------------------------------------------------- */
    --z-header: 100;
    --z-menu: 120;
    --z-top: 140;
}