/* ----------------- */
/* ---BASE SCALERS--- */
/* ----------------- */
:root {
    --base-scaler: 10px;
    --base-font-scaler: 48px
}

@media all and (max-width: 900px) {
    :root {
        --base-scaler: calc(3.3px + 0.75vw);
        --base-font-scaler: calc(21.2px + 3vw);
    }
}

@media all and (max-width: 360px) {
    :root {
        --base-scaler: 6px;
        --base-font-scaler: 32px;
    }
}

:root {
    /* ----------------- */
    /* ---GLOBAL VARS--- */
    /* ----------------- */

    /* COLORS */

    /* brand */
    --brand-1: #002672; /* placeholder - overriden by brand file */
    --brand-2: #EA021A; /* placeholder - overriden by brand file */
    --brand-3: linear-gradient(#002672, #00043B); /* placeholder - overriden by brand file */
    --brand-highlight: #3578FF; /* used for ui highlights */

    /* shade colors (for internal use) */
    --shade-0: #FFFFFF;
    --shade-1: #F4F5F7;
    --shade-2: #E2E2E2;
    --shade-2-5: #9F9F9F;
    --shade-3: #707070;
    --shade-4: #4A4A4A;
    --shade-4-5: #453F3F;
    --shade-4-75: #252525;
    --shade-5: #222222;
    --shade-6: #111111;

    /* semi opaque blacks */
    --black-op80: rgba(0, 0, 0, 0.8);
    --black-op60: rgba(0, 0, 0, 0.6);
    --black-op40: rgba(0, 0, 0, 0.4);

    /* shade gradients */
    --gradient-radial: radial-gradient(circle at center,#fff 0,#e8e7ed 100%);
    --gradient-pipe: linear-gradient(90deg,#d7d5dd 0,#eee 30%,#eee 70%,#d7d5dd);
    --gradient-linear: linear-gradient(180deg, #F5F5F5, #E3E4E4);

    /* ui states */
    --success: #299934; /* success messages */
    --alert: #EA021A; /* alerts and warnings */
    --live: #EA021A; /* live scores and coverage */
    --live-color: white;
    --breaking: #FDE000; /* breaking news components */
    --breaking-color: #111;
    --link-color: #3157A1; /* global text link color */
    --link-color-invert: #2aa2e1;
    --link-color-on-light: #00369f;
    --link-color-on-dark: #4fc2ff;

    --live-bg: linear-gradient(180deg, #E90E10, #BC0000); /* gradient version of live */
    --breaking-bg: linear-gradient(180deg, #F8EB1F, #F2CA06); /* gradient version of breaking */

    /* common alias values */
    --body-bg: var(--gradient-pipe); /* general site bg */
    --article-bg: var(--shade-0); /* article page bg */
    --component-bg: var(--shade-0); /* components bg is generally white */
    --component-bg-transparent: #ffffff00;
    --component-shade: var(--shade-1); /* component header bg */
    --component-shade-gradient: linear-gradient(180deg, #F5F5F5, #E3E4E4); /* gradient version of above */
    --component-shade-dark: var(--shade-5);
    --border-color: var(--shade-2); /* border color for components */
    --border-color-dark: var(--shade-5) /* stronger border color for components */;
    --text-color: var(--shade-4); /* main body text */
    --text-color-invert: var(--shade-0); /* text on dark backgrounds */
    --text-color-secondary: var(--shade-3); /* lighter body text */
    --text-color-tertiary: var(--shade-2-5); /* lighest body text */
    --text-color-dark: var(--shade-6); /* darker body text */
    --text-color-light: var(--shade-0); /* darker body text */
    --icon-color: var(--shade-6); /* color for svg/ui icons */

    /* box shadows */
    --drop-shadow: 0 3px 3px rgba(0, 0, 0, 0.12); /* horizontal drop shadow beneath a ui element */
    --glow-shadow: 0 0 8px rgba(0,0,0,0.12); /* glow shadow around a ui element */

    /* SPACING */

    /* scaling values (for internal use) - scales between 360 - 900px */
    --space-xs: calc(var(--base-scaler) * 1); /* 6 - 10px */
    --space-s: calc(var(--base-scaler) * 2); /* 12 - 20px */
    --space-m: calc(var(--base-scaler) * 3); /* 18 - 30px */
    --space-l: calc(var(--base-scaler) * 4); /* 24 - 40px */
    --space-xl: calc(var(--base-scaler) * 6); /* 36 - 60px */

    /* widths constraints */
    --site-width: 1024px; /* max site width including gutters */
    --site-width-s: 480px; /* mobile site width */
    --site-width-m: 700px; /* article width */
    --site-width-amp: 600px; /* max site width for amp */
    --site-width-inner: 976px; /* max site width minus gutters */

    /* common alias values */
    --component-gap: var(--space-s); /* gap between internal component elements */
    --component-padding: var(--space-m); /* padding on main component container */
    --component-margin: var(--space-l); /* vertical margin between different components */
    --group-margin: var(--space-xl); /* large vertical margin between large or groups of components */
    --site-gutter: calc(var(--space-s) + 4px); /* left and right gutter on site body */

    --z-index-ui: 999; /* layer for site ui elements - navs, menus etc */
    --z-index-ads: 9999; /* layer for ads that go over ui */
    --z-index-overlays: 99999; /* layer for overlays that sit on top of everything */

    /* FONTS */

    /* faces */
    --branding-sky-text-font: 'Sky Text';
    --branding-sky-headline-font: 'Sky Headline', 'arial narrow', sans-serif;

    /* settings */
    --base-font-name: 'skytext';
    --base-font-load-setting: 'optional';

    /* bases */
    --base-font-size: 18px;

    /* scaling values (for internal use) - scales between 360 - 900px */
    --font-scale-xl: var(--base-font-scaler); /* 32 - 48px */
    --font-scale-l: calc((var(--base-font-scaler) * 1.25 / 2) + 6px); /* 26 - 36px */
    --font-scale-m: calc(var(--base-font-scaler) * 0.35 + 13.2px); /* 24 - 30px */
    --font-scale-s: calc( ( (var(--base-font-scaler)) / 8) + 16px); /* 20 - 22px */
    --font-scale-xs: calc( ( (var(--base-font-scaler)) / 8) + 14px); /* 18 - 20px */
    --font-scale-xxs: calc( ( (var(--base-font-scaler) - 10px) / 8) + 13.25px); /* 16 - 18px */

    /* fixed values */
    --font-fixed-m: var(--base-font-size);
    --font-fixed-s: calc(var(--base-font-size) - 2px);
    --font-fixed-xs: calc(var(--base-font-size) - 4px);

    /* common alias values */
    --display-1: var(--font-scale-xl); /* article headline/extra large header */
    --display-2: var(--font-scale-l); /* large component/group header */
    --display-3: var(--font-scale-m); /* med component header */
    --display-4: var(--font-scale-s); /* standard component header */
    --display-5: var(--font-scale-xs); /* small component header */
    --display-6: var(--font-scale-xxs); /* x small component header */
    --article-text: var(--font-scale-xs); /* any large body of text */
    --component-text: var(--font-scale-xxs); /* smaller blocks of text within components */
    --supporting-text: var(--font-fixed-s); /* accompanying text */
    --label-text: var(--font-fixed-xs); /* label and note text */
}