/*
 * Design tokens — sursă: D:\Evia assets\semantic\
 *   Semantic_ Culori\Mode 1.tokens.json
 *   Semantic_ Tipografie\{Desktop,Tabletă,Mobil}.tokens.json
 * La fiecare design nou, re-verifică aceste fișiere înainte de a adăuga
 * culori/fonturi noi — nu inventa valori, mapează pe tokenul semantic
 * cel mai apropiat (Fundal/Conținut/Chenar) sau adaugă unul nou aici.
 */
:root {
    /* ===== Fundal ===== */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F5F5F5;
    --color-bg-tertiary: #D5D7DA;
    --color-bg-brand: #3C69F6;
    --color-bg-brand-secondary: #F5F8FF;
    --color-bg-button-primary: #3C69F6;
    --color-bg-button-primary-hover: #3054C4;
    --color-bg-button-primary-press: #243F93;
    --color-bg-button-secondary: #FFFFFF;
    --color-bg-button-secondary-active: #252B37;
    --color-bg-button-secondary-disabled: #E9EAEB;
    --color-bg-button-tertiary: #F5F5F5;
    --color-bg-button-tertiary-hover: #E9EAEB;
    --color-bg-button-tertiary-press: #D5D7DA;
    --color-bg-button-special: #FFFFFF;
    --color-bg-negative: #FDEFED;
    --color-bg-informative: #ECF4FE;
    --color-bg-partner: #F3F0FE;
    --color-bg-ai: #F7ECFE;
    --color-bg-loyalty: #F5F8FF;
    --color-bg-positive: #EFFAF6;
    --color-bg-verified-purchase: #EFFAF6;
    --color-bg-discount: #E23013;
    --color-bg-popular: #FDF0CE;
    --color-bg-switch-light: #FDF0CE;
    --color-bg-rating: #FEF9EB;
    --color-bg-inverse: #252B37;
    --color-bg-modal: rgba(0, 0, 0, 0.5);

    /* ===== Conținut ===== */
    --color-content-primary: #101828;
    --color-content-secondary: #414651;
    --color-content-tertiary: #717680;
    --color-content-subtle: #D5D7DA;
    --color-content-brand: #3C69F6;
    --color-content-button-primary: #FFFFFF;
    --color-content-button-secondary: #101828;
    --color-content-button-tertiary: #101828;
    --color-content-button-secondary-active: #FFFFFF;
    --color-content-button-special-primary: #101828;
    --color-content-button-special-secondary: #717680;
    --color-content-negative-primary: #B4260F;
    --color-content-negative-secondary: #E75942;
    --color-content-informative: #235493;
    --color-content-ai-primary: #661C91;
    --color-content-loyalty-primary: #243F93;
    --color-content-loyalty-secondary: #3C69F6;
    --color-content-positive-primary: #0B6F4D;
    --color-content-positive-secondary: #0F9467;
    --color-content-positive-tertiary: #13B981;
    --color-content-popular: #E75942;
    --color-content-popular-inverse: #936D06;
    --color-content-switch-light: #936D06;
    --color-content-partner-primary: #734EF4;
    --color-content-partner-secondary: #39277A;
    --color-content-rating-primary: #936D06;
    --color-content-rating-secondary: #F5B70B;
    --color-content-rating-tertiary: #FBE29D;
    --color-content-inverse: #FFFFFF;

    /* ===== Chenar ===== */
    --color-border-primary: #E9EAEB;
    --color-border-secondary: #D5D7DA;
    --color-border-tertiary: #717680;
    --color-border-brand: #3C69F6;
    --color-border-brand-secondary: #B1C3FB;
    --color-border-product: #FFFFFF;
    --color-border-button-secondary: #E9EAEB;
    --color-border-button-secondary-hover: #D5D7DA;
    --color-border-button-secondary-press: #A4A7AE;
    --color-border-button-secondary-active: #252B37;
    --color-border-negative-primary: #ED8271;
    --color-border-negative-secondary: #F3ACA0;
    --color-border-negative-tertiary: #F9D5CF;
    --color-border-informative: #D7E8FD;
    --color-border-switch-light: #F9D36C;
    --color-border-partner: #DCD2FC;
    --color-border-loyalty: #D8E1FD;
    --color-border-positive: #CFF1E5;
    --color-border-ai: #EED5FC;
    --color-border-inverse-primary: #252B37;
    --color-border-inverse-secondary: #535862;

    /* ===== Tipografie ===== */
    --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-secondary: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Text — identic pe Desktop/Tabletă/Mobil */
    --text-2xs-size: 0.6875rem;   /* 11px */
    --text-2xs-line: 1rem;        /* 16px */
    --text-2xs-tracking-uppercase: 0.25px;
    --text-xs-size: 0.8125rem;    /* 13px */
    --text-xs-line: 1.25rem;      /* 20px */
    --text-xs-tracking: -0.015em;
    --text-s-size: 0.875rem;      /* 14px */
    --text-s-line: 1.25rem;       /* 20px */
    --text-s-tracking: -0.018em;
    --text-m-size: 1rem;          /* 16px */
    --text-m-line: 1.5rem;        /* 24px */
    --text-m-tracking: -0.03em;
    --text-l-size: 1.1875rem;     /* 19px */
    --text-l-line: 1.75rem;       /* 28px */
    --text-l-tracking: -0.026em;

    /* Titlu — scală Mobil/Tabletă (< 1440px), suprascrisă pe Desktop mai jos */
    --heading-xs-size: 1rem;        /* 16px */
    --heading-xs-line: 1.5rem;      /* 24px */
    --heading-s-size: 1.1875rem;    /* 19px */
    --heading-s-line: 1.75rem;      /* 28px */
    --heading-m-size: 1.4375rem;    /* 23px */
    --heading-m-line: 2rem;         /* 32px */
    --heading-l-size: 1.75rem;      /* 28px */
    --heading-l-line: 2.25rem;      /* 36px */
    --heading-xl-size: 2.0625rem;   /* 33px */
    --heading-xl-line: 3rem;        /* 48px */

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-pill: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);

    /* Transition */
    --transition-fast: 150ms ease;

    /* Z-index */
    --z-header: 1000;

    /* Layout */
    --site-container-max-width: 1512px;
    --site-container-padding-x: 2.5rem;
    --offcanvas-panel-width: 26rem;
}

/* Breakpoint Desktop (Figma "Breakpoint/L" = 1440px) — scală Titlu mai mare */
@media (min-width: 1440px) {
    :root {
        --heading-xs-size: 1.4375rem;  /* 23px */
        --heading-xs-line: 2rem;       /* 32px */
        --heading-s-size: 1.75rem;     /* 28px */
        --heading-s-line: 2.25rem;     /* 36px */
        --heading-m-size: 2.0625rem;   /* 33px */
        --heading-m-line: 3rem;        /* 48px */
        --heading-l-size: 2.5rem;      /* 40px */
        --heading-l-line: 3rem;        /* 48px */
        --heading-xl-size: 3rem;       /* 48px */
        --heading-xl-line: 3.25rem;    /* 52px */
    }
}