/* ============================================================
   CROC — GLOBAL THEME
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    /* ========================================================
       MAIN PAGE COLOURS
    ======================================================== */

    /* Main page background */
    --page-color: #080808;

    /* Main header / navbar */
    --header-color: #17121d;

    /* Footer */
    --footer-color: #050505;


    /* ========================================================
       TEXT
    ======================================================== */

    /* Normal light text */
    --dark-text: #f2f2f2;

    /* Light text for dark backgrounds */
    --light-text: #ffffff;

    /* Header text */
    --header-text: #ffffff;
    /* Normal light text */

   /* Secondary light text */
   --light-secondary-text: #cccccc;

    /* Footer text */
    --footer-text: #ffffff;

    /* Secondary / less important text */
    --muted-text: #999999;

    --body-font: 'DM Sans', Arial, sans-serif;
    --display-font: 'DM Sans', Arial, sans-serif;
    --standard-border: 1px solid var(--border-color);
    --brand-border: 2px solid var(--primary-color);
    --fast-transition: 180ms ease;
    --standard-transition: 280ms ease;



    /* ========================================================
       BRAND / PRIMARY COLOUR
    ======================================================== */

    /* Purple sampled from the CROC crest */
    --brand-purple: #533469;
    --brand-purple-rgb: 83, 52, 105;
    --primary-color: #8055a4;

    /* Darker version of the primary colour */
    --primary-dark: #3e2750;

    /* Lighter version of the primary colour */
    --primary-light: #b895d5;

    --accent-purple: #9b78bb;
    --accent-green: #708d4f;
    --accent-gray: #a7a7a7;
    --accent-warm: #f1b66b;



    /* ========================================================
       BUTTONS
    ======================================================== */

    /* Normal button colour */
    --button-color: #684383;

    /* Button text */
    --button-text: #ffffff;

    /* Button hover colour */
    --button-hover: #8055a4;

    /* Secondary / outline button */
    --button-secondary: #111111;

    /* Secondary button text */
    --button-secondary-text: #ffffff;



    /* ========================================================
       BOXES / CARDS
    ======================================================== */

    /* Normal box/card background */
    --box-color: #111111;

    /* Secondary box/card background */
    --box-secondary-color: #181818;

    /* Dark box/card background */
    --box-dark-color: #0b0b0b;



    /* ========================================================
       SECTIONS
    ======================================================== */

    /* Normal section */
    --section-color: #080808;

    /* Alternate section */
    --section-secondary-color: #17121d;

    /* Slightly lighter alternate section */
    --section-tertiary-color: #251a30;

    /* Dark section */
    --section-dark-color: #050505;



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

    /* Normal borders */
    --border-color: #2a2a2a;

    /* Very subtle borders */
    --border-light: #1c1c1c;

    /* Brand accent borders */
    --border-primary: #8055a4;



    /* ========================================================
       STATUS / WARNING
    ======================================================== */

    /* Success */
    --success-color: #3fa66b;
    --success-background: #10271b;

    /* Warning */
    --warning-color: #d79f1b;
    --warning-background: #2a210d;

    /* Danger */
    --danger-color: #e10600;
    --danger-background: #2a0d0d;
    --danger-text: #e87575;

    /* Common surfaces and overlays */
    --surface-raised-color: #211a29;
    --surface-inset-color: #100e14;
    --surface-hover-color: #30263a;
    --border-accent-color: #6e5085;
    --overlay-strong: rgba(8, 8, 8, 0.9);
    --overlay-medium: rgba(8, 8, 8, 0.58);
    --overlay-soft: rgba(8, 8, 8, 0.3);
    --overlay-line: rgba(255, 255, 255, 0.12);
    --carbon-weave-background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 4px),
        linear-gradient(135deg, #111014, #0b0a0d 52%, #121015);



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

    /* Main section spacing */
    --section-padding: 70px;

    /* Smaller section spacing */
    --section-padding-small: 40px;

    /* Larger section spacing */
    --section-padding-large: 100px;

    /* Horizontal page spacing */
    --page-padding: 40px;

    /* Mobile horizontal spacing */
    --page-padding-mobile: 20px;



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

    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;



    /* ========================================================
       COMMON SIZES
    ======================================================== */

    /* Main content width */
    --content-width: 1400px;

    /* Narrow content width */
    --content-width-narrow: 900px;



    /* ========================================================
       COMMON PADDING
    ======================================================== */

    /* Normal box padding */
    --box-padding: 28px;

    /* Small box padding */
    --box-padding-small: 20px;

    /* Button padding */
    --button-padding-y: 12px;
    --button-padding-x: 22px;



    /* ========================================================
       CORNERS
    ======================================================== */

    --radius-small: 4px;
    --radius-medium: 7px;
    --radius-large: 12px;



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

    --shadow-small:
        0 2px 8px rgba(0, 0, 0, 0.25);

    --shadow-medium:
        0 8px 24px rgba(0, 0, 0, 0.35);

}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--carbon-weave-background);
    background-attachment: fixed;
    color: var(--dark-text);
    font-family: var(--body-font);
    line-height: 1.5;
}

main {
    padding-top: 145px;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

@media (max-width: 800px) {
    main {
        padding-top: 115px;
    }
}