@import "variables";

// Default Vendure light theme. The Clarity component custom properties
// are left as their defaults.
:root {
    // Colors
    --color-grey-100: #fafafa;
    --color-grey-200: #f2f3f5;
    --color-grey-300: #bfc3cc;
    --color-grey-400: #97979a;
    --color-grey-500: #525456;
    --color-grey-600: #3f4445;
    --color-grey-700: #303233;
    --color-grey-800: #202223;
    --color-grey-900: #0f1011;

    // Universal semantic colors
    --color-component-bg-100: var(--color-grey-100);
    --color-component-bg-200: var(--color-grey-200);
    --color-component-bg-300: var(--color-grey-300);
    --color-component-border-100: var(--color-grey-200);
    --color-component-border-200: var(--color-grey-300);
    --color-component-border-300: var(--color-grey-400);
    --color-text-100: var(--clr-global-font-color);
    --color-text-200: var(--clr-global-font-color-secondary);
    --color-text-300: var(--color-grey-400);
    --color-text-inverse: white;



    // Component-specific colors
    --color-top-bar-bg: white;

    --color-icon-button: var(--color-grey-600);
    --color-form-input-bg: white;
    --color-timeline-thread: var(--color-primary-100);

    --color-chip-warning-border: var(--color-warning-200);
    --color-chip-warning-text: var(--color-warning-600);
    --color-chip-warning-bg: var(--color-warning-100);
    --color-chip-success-border: var(--color-success-200);
    --color-chip-success-text: var(--color-success-600);
    --color-chip-success-bg: var(--color-success-100);
    --color-chip-error-border: var(--color-error-200);
    --color-chip-error-text: var(--color-error-600);
    --color-chip-error-bg: var(--color-error-100);

    --color-json-editor-background-color: var(--color-grey-200);
    --color-json-editor-text: var(--color-grey-600);
    --color-json-editor-string: var(--color-secondary-600);
    --color-json-editor-number: var(--color-primary-600);
    --color-json-editor-boolean: var(--color-primary-600);
    --color-json-editor-null: var(--color-grey-500);
    --color-json-editor-key: var(--color-success-500);
    --color-json-editor-error: var(--color-error-500);


    --color-white: #fff;
    --color-black: #000;
    --color-weight-100: hsl(0 0% 95%);
    --color-weight-125: hsl(0 0% 93%);
    --color-weight-150: hsl(0 0% 90%);
    --color-weight-200: hsl(0 0% 85%);
    --color-weight-300: hsl(0 0% 75%);
    --color-weight-400: hsl(0 0% 65%);
    --color-weight-500: hsl(0 0% 55%);
    --color-weight-600: hsl(0 0% 45%);
    --color-weight-700: hsl(0 0% 35%);
    --color-weight-800: hsl(0 0% 25%);
    --color-weight-900: hsl(0 0% 15%);
    --color-weight-950: hsl(0 0% 10%);
    --color-weight-975: hsl(0 0% 7%);
    --color-weight-1000: hsl(0 0% 5%);

    --color-primary-100: hsl(196 100% 95%);
    --color-primary-125: hsl(196 100% 93%);
    --color-primary-150: hsl(196 100% 90%);
    --color-primary-200: hsl(196 100% 85%);
    --color-primary-300: hsl(196 100% 75%);
    --color-primary-400: hsl(196 100% 65%);
    --color-primary-500: hsl(196 100% 55%);
    --color-primary-600: hsl(196 100% 45%);
    --color-primary-700: hsl(196 100% 35%);
    --color-primary-800: hsl(196 100% 25%);
    --color-primary-900: hsl(196 100% 15%);
    --color-primary-950: hsl(196 100% 10%);
    --color-primary-975: hsl(196 100% 7%);
    --color-primary-1000: hsl(196 100 5%);

    --color-accent-100: hsl(35 100% 95%);
    --color-accent-125: hsl(35 100% 93%);
    --color-accent-150: hsl(35 100% 90%);
    --color-accent-200: hsl(35 100% 85%);
    --color-accent-300: hsl(35 100% 75%);
    --color-accent-400: hsl(35 100% 65%);
    --color-accent-500: hsl(35 100% 55%);
    --color-accent-600: hsl(35 100% 45%);
    --color-accent-700: hsl(35 100% 35%);
    --color-accent-800: hsl(35 100% 25%);
    --color-accent-900: hsl(35 100% 15%);
    --color-accent-950: hsl(35 100% 10%);
    --color-accent-975: hsl(35 100% 7%);
    --color-accent-1000: hsl(35 100% 5%);

    --color-success-100: hsl(158 76% 95%);
    --color-success-125: hsl(158 76% 93%);
    --color-success-150: hsl(158 76% 90%);
    --color-success-200: hsl(158 76% 85%);
    --color-success-300: hsl(158 76% 75%);
    --color-success-400: hsl(158 76% 65%);
    --color-success-500: hsl(158 76% 55%);
    --color-success-600: hsl(158 76% 45%);
    --color-success-700: hsl(158 76% 35%);
    --color-success-800: hsl(158 76% 25%);
    --color-success-900: hsl(158 76% 15%);
    --color-success-950: hsl(158 76% 10%);
    --color-success-975: hsl(158 76% 7%);
    --color-success-1000: hsl(158 76% 5%);

    --color-warning-100: hsl(53 100% 95%);
    --color-warning-125: hsl(53 100% 93%);
    --color-warning-150: hsl(53 100% 90%);
    --color-warning-200: hsl(53 100% 85%);
    --color-warning-300: hsl(53 100% 75%);
    --color-warning-400: hsl(53 100% 65%);
    --color-warning-500: hsl(53, 100%, 47%);
    --color-warning-600: hsl(53 100% 45%);
    --color-warning-700: hsl(53 100% 35%);
    --color-warning-800: hsl(53 100% 25%);
    --color-warning-900: hsl(53 100% 15%);
    --color-warning-950: hsl(53 100% 10%);
    --color-warning-975: hsl(53 100% 7%);
    --color-warning-1000: hsl(53 100% 5%);

    --color-error-100: hsl(4 100% 95%);
    --color-error-125: hsl(4 100% 93%);
    --color-error-150: hsl(4 100% 90%);
    --color-error-200: hsl(4 100% 85%);
    --color-error-300: hsl(4 100% 75%);
    --color-error-400: hsl(4 100% 65%);
    --color-error-500: hsl(4, 73%, 51%);
    --color-error-600: hsl(4 100% 45%);
    --color-error-700: hsl(4 100% 35%);
    --color-error-800: hsl(4 100% 25%);
    --color-error-900: hsl(4 100% 15%);
    --color-error-950: hsl(4 100% 10%);
    --color-error-975: hsl(4 100% 7%);
    --color-error-1000: hsl(4 100% 5%);

    --color-left-nav-bg: var(--color-weight-100);
    --color-left-nav-text: var(--color-text);
    --color-left-nav-text-hover: var(--color-primary-700);

    --color-table-alternate-row-bg: hsl(0 0% 98% / 1);

    // Layout
    --layout-content-max-width: 1200px;

    // Login page
    --login-page-bg: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
    --color-login-gradient-top: var(--color-primary-800);
    --color-login-gradient-bottom: black;

    // header
    --page-header-color: hsl(0 0% 98%);

    // Border radius
    --clr-global-borderradius: 4px;
    --border-radius-sm: div(var(--clr-global-borderradius), 2);
    --border-radius: var(--clr-global-borderradius);
    --border-radius-lg: calc(var(--space-unit) * 3);
    --border-radius-img: var(--clr-global-borderradius);
    --border-radius-input: var(--clr-global-borderradius);

    // typography
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;

    // spacing
    --space-unit: 8px;
}
