/**
 * SPDX-License-Identifier: LicenseRef-InnercodeUAB-Commercial-EULA
 * Copyright (c) Since 2012 INNERCODE, UAB
 *
 * Licensed under the Innercode Commercial End User License Agreement (EULA).
 * See https://www.innercode.lt/licenses/eula.txt
 *
 * @link https://www.innercode.lt
 */

.new-design {
    /* === Core Theme Colors === */
    --main-bg: #fcdb00;                /* Main background */
    --selected-card-bg: #fff9dc;                /* Main background */
    --card-bg: #fff;                /* Main background */
    --header-linear: #f6d900;          /* Header Linear */
    --header-center: #f4c900;          /* Header Center */
    --grometa-green: #2D6345;          /* Grometa Green */
    --cta-hover: #157b3a;              /* CTA Hover */

    /* === Neutrals === */
    --black: #000000;                  /* Black */
    --grometa-black: #191919;          /* Grometa Black */
    --white: #ffffff;                  /* White */
    --light-gray: #f3f3f3;             /* Light Gray */
    --gray-accents: #e8e8e8;           /* Gray accents */
    --window-borders: #D7D7D7;         /* Window Borders */
    --form-border: #e0e0e0;            /* Form Borders */
    --form-border-active: #000000;     /* Form border when clicked */
    --darker-gray: #7f7f7f;            /* Darker elements */
    --dark-gray: #383838;              /* Dark Gray */
    --ligher-gray: #434343;              /* Lither Gray */
    --box-borders-default: 1px solid #dbdbdb;
    --main-for-icons: #1C1B1F;
    --separator-grey: #E9E9E9;

    /* === UI Elements === */
    --grometa-border: #cbcbcb;         /* Grometa Borders */
    --text-area-border: #7E7E7E;       /* Text Area Borders */
    --modal-secondary-bg: #f0f0f0;     /* Modal Button Secondary BG */
    --light-yellow-hover: #fff6c7;     /* Light Yellow Hover */
    --light-yellow-bg: #fffad0;        /* Light Yellow BG */
    --very-light-yellow: #fffae6;      /* Very Light Yellow Accents */

    /* === Highlight / Action Colors === */
    --warning: #ff4136;                /* Warning */
    --warning-bg: #ffe9e9;             /* Warning BG */
    --link-blue: #0079ff;              /* Links */
    --success-green: #29a35e;          /* Success */
    --success-bg: #e6f6ed;             /* Success BG */
    --grometa-warning-bg: #FCF1B7;     /* Grometa Warning BG */

    /* === Multi-accent Colors === */
    --multi-one: #4a90e2;
    --multi-two: #f4e04d;
    --multi-three: #d81b60;

    /* === Misc === */
    --input-bg: #ffffff;
    --secondary-bg: #f9f9f9;
    --suggestion-text: #999999;
    --color-help: #555555;
    --table-border-color: #545454;

    --color-text: #212121;
    --color-label: #212121;
    --color-error: #b00020;
    --color-warning: #CC3636;
    --color-primary: #2b6641;
    --color-border: #ccc;
    --color-bg-input: #fff;
    --color-bg-section: #f7f7f7;
    --for-links: #235789;

    /* === Typography Sizes === */
    --font-default: 14px;
    --font-xxxl: 24px;
    --font-xxl: 20px;
    --font-xl: 18px;
    --font-l: 16px;
    --font-m: 14px;
    --font-s: 12px;
    --font-xs: 10px;

    /* === Spacing Tokens === */
    --space-xs: 4px;
    --space-sm-h: 6px;
    --space-sm: 8px;
    --space-md-h: 12px;
    --space-md: 16px;
    --space-md-neg: -16px;
    --space-lg-h: 20px;
    --space-lg: 24px;
    --space-lg-neg: -24px;
    --space-xl: 32px;
    --space-xl-neg: -32px;
    --space-xxl: 40px;
    --space-xxxl: 48px;

    /* === Icons and icon buttons sizes === */
    --icon-size-sm: 12px;
    --icon-size-md: 16px;
    --icon-size-lg-h: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl-h: 30px;
    --icon-size-xl: 36px;
    --icon-size-xxl: 45px;

    /* === Radius & Shadows === */
    --radius: 12px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --radius-xs: 4px;
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    --bigger-shadow: 0px 12px 20px 0px rgba(0, 0, 0, 0.08);
    --smaller-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);

    /* === Font Families === */
    --font-family-base: "Open Sans";

    /* === Headings === */
    --font-h1: 24px;
    --font-h2: 21px;
    --font-h3: 18px;
    --font-h4: 16px;
    --weight-h1: 500;
    --weight-h2: 500;
    --weight-h3: 500;
    --weight-h4: 400;

    /* === Buttons === */
    --font-btn-main: 18px;
    --font-btn-secondary: 16px;
    --font-btn-tertiary: 14px;
    --weight-btn-main: 500;
    --weight-btn-secondary: 500;
    --weight-btn-tertiary: 500;

    --input-height: 40px;
    --qty-input-height: 35px;

    --line-height-default: normal;
    --line-height-h1: 33px;
    --line-height-h2: 29px;
    --line-height-h3: 25px;
    --line-height-h4: 21px;
    --line-height-p: 19px;
    --line-height-p-big: 22px;
    --line-height-md: 24px;
    --line-height-default: normal;
    --line-height-btn-main: normal;
    --line-height-btn-secondary: 1.125;
    --line-height-list: 2;
    --line-height-half: 1.5;
    --line-height-sm: 16px;

    /* === Text === */
    --weight-default: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --font-style-default: normal;

    /* === Labels === */
    --font-label-m: 14px;
    --font-label-s: 12px;
    --weight-label: 700;

    /* === Pricing === */
    --font-price-main: 24px;
    --font-price-total: 21px;
    --weight-price-main: 700;
    --weight-price-total: 700;

    /* === Old Price === */
    --font-old-price-l: 14px;
    --font-old-price-s: 14px;
    --weight-old-price-l: 300;
    --weight-old-price-s: 400;

    /* === Transitions ===  */
    --transition-default: all .3s ease;
    --transition-ease-in-out: all 0.2s ease-in-out;
    --transition-outline: outline 0.1s;
}