@import "variables";

// Default Vendure light theme. The Clarity component custom properties
// are left as their defaults.
:root {
    // Colors
    --color-primary-100: #e3f6fc;
    --color-primary-200: #afdaf3;
    --color-primary-300: #9adbf3;
    --color-primary-400: #5dcff3;
    --color-primary-500: #13b7f3;
    --color-primary-600: #137fac;
    --color-primary-700: #0b425d;
    --color-primary-800: #072f3c;
    --color-primary-900: #0a1b27;
    --color-secondary-100: #d9f9e1;
    --color-secondary-200: #b6efd3;
    --color-secondary-300: #91ceb8;
    --color-secondary-400: #69a88e;
    --color-secondary-500: #438571;
    --color-secondary-600: #376e5d;
    --color-secondary-700: #254b40;
    --color-secondary-800: #182f28;
    --color-secondary-900: #08221c;
    --color-success-100: #ddfbdd;
    --color-success-200: #afed88;
    --color-success-300: #78c656;
    --color-success-400: #54af32;
    --color-success-500: #308300;
    --color-success-600: #255900;
    --color-success-700: #1d4900;
    --color-success-800: #122400;
    --color-success-900: #060d00;
    --color-error-100: #fce2de;
    --color-error-200: #e77f77;
    --color-error-300: #f3553d;
    --color-error-400: #e13f28;
    --color-error-500: #C92100;
    --color-error-600: #891d00;
    --color-error-700: #5b1200;
    --color-error-800: #3c0c00;
    --color-error-900: #2a0900;
    --color-warning-100: #fff6dc;
    --color-warning-200: #ffe1a3;
    --color-warning-300: #ffd2a3;
    --color-warning-400: #ffb74d;
    --color-warning-500: #FF9F07;
    --color-warning-600: #a16704;
    --color-warning-700: #674002;
    --color-warning-800: #492c02;
    --color-warning-900: #231401;
    --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);

    // Component-specific colors
    --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);

    // Other variables
    --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=);
    --breakpoint-small: 768px;
}