/* This file is ONLY for the LXP styleguide. Do not place reusable/global values which are not part of the LXP styleguide */

:root {
    /* Colors */
    --color-essential-black: #111111;
    --color-essential-white: #ffffff;

    --color-primary-lime-yellow: #c8ff00;
    --color-primary-midnight-blue: #140046;
    --color-primary-electric-indigo: #5500eb;

    --color-secondary-flat-red: #eb5474;
    --color-secondary-flat-green: #16aa7a;
    --color-secondary-powder-blue: #b2c0fa;
    --color-secondary-cosy-grey: #ccc8c0;

    --color-shades-light-powder-blue: #e8ecfd;
    --color-shades-light-cosy-grey: #f0efec;
    --color-light-background: #fbfbfb;

    --color-warning-light: #fffbcb;
    --color-warning-dark: #be8a01;

    /* Font Family */
    --font-family: "Rubik";

    /* Font Weight */
    --font-weight-400: 400;
    --font-weight-600: 600;

    /* Font Size Calculations */
    --base-viewport-width: calc(320 / 16);
    --max-viewport-width: calc(1920 / 16);
    --viewport-diff: calc(var(--max-viewport-width) - var(--base-viewport-width));
    --base-font-size: 16;
    --viewport-scale: calc((100vw - (var(--base-viewport-width) * 1rem)) / var(--viewport-diff));

    /* heading1: 26 to 32 */
    --font-size-heading1: clamp(1.625rem, calc(1.625rem + 0.375 * var(--viewport-scale)), 2rem);

    /* heading3: 20 to 24 */
    --font-size-heading3: clamp(1.25rem, calc(1.25rem + 0.25 * var(--viewport-scale)), 1.5rem);

    /* body: 16 to 18 */
    --font-size-body: clamp(1rem, calc(1rem + 0.125 * var(--viewport-scale)), 1.125rem);

    /* body-small: 14 to 16 */
    --font-size-body-small: clamp(0.875rem, calc(0.875rem + 0.125 * var(--viewport-scale)), 1rem);

    /* Font Style */
    --font-style-normal: normal;

    /* Spacings */
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-10: 0.625rem;
    --spacing-12: 0.75rem;
    --spacing-14: 0.875rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-28: 1.75rem;
    --spacing-32: 2rem;
    --spacing-36: 2.25rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-56: 3.5rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;

    /* Radii */
    --radius-8: 8px;
    --radius-12: 12px;
    --radius-16: 16px;

    /* Outline Width */
    --outline-width-1px: 1px;
    --outline-width-2px: 2px;
    --outline-width-3px: 3px;

    /* Box Shadow */
    --box-shadow: 3px 3px 0px 0px var(--color-primary-midnight-blue);

    /* Transition Property */
    --transition-property-all: all;

    /* Transition Delay */
    --transition-delay-200: 200ms;

    /* Transition Timing Function */
    --transition-timing-function-ease: ease-in-out;

    /* Transition */
    --transition: var(--transition-property-all) var(--transition-delay-200) var(--transition-timing-function-ease);

    /* Transform */
    --transform: translate(3px, 3px);

    /* Breakpoints - these are just for reference and don't work within media queries! */
    --breakpoint-tablet: 768px;
    --breakpoint-hybrid: 1024px;
    --breakpoint-desktop: 1280px;
    --breakpoint-desktopL: 1536px;
    --breakpoint-desktopXL: 1920px;
}