/*=========================================================
    Systronics Website
    Design Variables
    Version: 1.0
=========================================================*/

:root {

    /* BRAND COLORS */
    --color-green: #2F8F4E;
    --color-blue: #5B7592;
    --color-orange: #D98B2B;

    --color-white: #FFFFFF;
    --color-charcoal: #2E3942;
    --color-light: #F7FAFC;
    --color-light-gray: #EEF2F5;
    --color-border: #D9E1E8;

    /* TEXT */
    --text-primary: var(--color-charcoal);
    --text-secondary: #66727F;
    --text-light: #FFFFFF;

    /* TYPOGRAPHY */
    --font-family: Arial, Helvetica, sans-serif;
    --font-weight-light:300;
    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;

    /* FONT SIZES */
    --text-xs:.75rem;
    --text-sm:.875rem;
    --text-base:1rem;
    --text-lg:1.125rem;
    --text-xl:1.35rem;
    --text-2xl:2rem;
    --text-3xl:3rem;
    --text-4xl:4rem;

    /* SPACING */
    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    --space-8:4rem;
    --space-9:5rem;

    /* WEBSITE WIDTH */
    --container-width:1200px;
    --container-small:960px;

    /* BORDER RADIUS */
    --radius-small:6px;
    --radius-medium:10px;
    --radius-large:18px;
    --radius-pill:999px;

    /* SHADOWS */
    --shadow-small:0 2px 10px rgba(0,0,0,.06);
    --shadow-medium:0 8px 25px rgba(0,0,0,.08);
    --shadow-large:0 20px 50px rgba(0,0,0,.10);

    /* TRANSITIONS */
    --transition-fast:.2s ease;
    --transition-normal:.35s ease;
    --transition-slow:.5s ease;
}