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

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

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

    /* Main header / navbar */
    --header-color: #151414;

    /* 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;



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

    /* Main CROC red */
    --primary-color: #e10600;

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

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



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

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

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

    /* Button hover colour */
    --button-hover: #ff1a12;

    /* 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: #0e0e0e;

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

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



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

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

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

    /* Red accent borders */
    --border-primary: #e10600;



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

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

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

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



    /* ========================================================
       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);

}