/**
 * Design tokens (--hts-*) and self-hosted @font-face declarations.
 * Source of truth: tasks/028-storefront-redesign-direction-a.md (direcția A
 * „Antracit premium”), care înlocuiește paleta și tipografia din
 * tasks/009-visual-spec.md §1 și tasks/024-brand-identity-staging.md §2.
 * Numele tokenurilor rămân, ca regulile existente să preia valorile noi.
 */

:root {
    /*
     * Albastrul logo-ului rămâne singura culoare de acțiune: butoane,
     * linkuri, stări active. Antracitul ține header-ul, hero-ul și benzile
     * de titlu; conținutul stă pe gri deschis, cu carduri albe, pentru că
     * fotografiile de produs sunt decupaje pe alb.
     */
    --hts-blue: #1946ba;
    --hts-blue-dark: #123a99;
    --hts-blue-bright: #1946ba;
    --hts-blue-50: #eef3fd;
    --hts-blue-100: #dce4f7;
    --hts-on-blue: #dce4f7;
    --hts-red: #c2410c;
    --hts-sale: #c2410c;
    --hts-success: #1a7f43;

    --hts-ink: #0e1116;
    --hts-ink-soft: #3a404a;
    --hts-paper: #f2f3f5;
    --hts-surface: #ffffff;
    --hts-line: #e3e6eb;
    --hts-radius: 4px;
    --hts-shadow: 0 12px 32px rgb(14 17 22 / 8%);
    --hts-shell: min(1296px, calc(100% - 2rem));

    /* Antracit: suprafețele închise ale direcției A. */
    --hts-dark: #0d0f12;
    --hts-dark-deep: #08090b;
    --hts-dark-raise: #16191f;
    --hts-dark-line: #23272f;
    --hts-dark-line-strong: #3a4150;
    /* Accent numai pe antracit (6,2:1 pe #0d0f12); pe fond deschis rămâne --hts-blue. */
    --hts-accent-on-dark: #6e90f0;
    --hts-sale-on-dark: #fb8a4c;
    --hts-stock-ok-on-dark: #7bd69a;
    --hts-stock-low-on-dark: #f2b661;

    --hts-surface-dim: #fafafb;
    --hts-text-muted: #5b6370;
    --hts-text-tertiary: #6b7280;
    --hts-text-placeholder: #8b95a7;
    --hts-border: #e3e6eb;
    --hts-border-control: #c9ced6;
    --hts-border-fine: #eef0f3;
    /* Contur de câmp: 3,7:1 pe alb (WCAG 1.4.11). */
    --hts-border-strong: #7d8592;

    /* Culori de stare: nu fac parte din identitate. */
    --hts-danger: #a33526;
    --hts-danger-bg: #f7e6e1;
    --hts-warning: #9a5b00;
    --hts-warning-bg: #f6efdc;
    --hts-success-bg: #e7f3ec;
    --hts-disabled-bg: #eef0f3;
    --hts-disabled-text: #8b95a7;
    --hts-specs-zebra: #fafafb;

    /* Text pe antracit */
    --hts-on-dark-heading: #ffffff;
    --hts-on-dark-ui: #e6e9ef;
    --hts-on-dark-body: #b7c0cf;
    --hts-on-dark-nav-idle: #c9d0dc;
    --hts-on-dark-muted: #8b95a7;
    --hts-on-dark-soft: #d5dae3;
    --hts-on-dark-faint: #8b95a7;
    --hts-on-dark-border: #3a4150;

    /* Spacing scale (px) */
    --hts-space-1: 4px;
    --hts-space-2: 8px;
    --hts-space-3: 12px;
    --hts-space-4: 16px;
    --hts-space-5: 24px;
    --hts-space-6: 32px;
    --hts-space-7: 48px;
    --hts-space-8: 64px;
    --hts-space-9: 96px;

    /* Radius: 4 px controale, 6 px carduri și panouri. */
    --hts-radius-sm: 4px;
    --hts-radius-md: 6px;
    --hts-radius-lg: 6px;
    --hts-radius-pill: 999px;

    /* Umbre */
    --hts-shadow-card-hover: 0 12px 32px rgb(14 17 22 / 10%);
    --hts-shadow-spotlight: 0 24px 60px rgb(0 0 0 / 45%);
    --hts-shadow-drawer: 0 16px 48px rgb(14 17 22 / 22%);

    /*
     * Fonturi: Archivo variabil (wght 400–900, wdth 100–125) pentru tot
     * textul; titlurile folosesc lățimea extinsă. JetBrains Mono numai
     * pentru etichete, coduri și valori tehnice.
     */
    --hts-font-display: Archivo, Arial, 'Helvetica Neue', sans-serif;
    --hts-font-ui: Archivo, Arial, 'Helvetica Neue', sans-serif;
    --hts-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --hts-display-stretch: 125%;

    /* Valori legate de locul de utilizare (pas A1.3 din task 009). */
    --hts-header-utility-text: #b7c0cf;
    --hts-category-index-color: #c9ced6;
    --hts-specs-group-bg: #f2f3f5;
    --hts-product-image-bg: #ffffff;
    --hts-stock-ok-bg: #e7f3ec;
    --hts-stock-no-text: #7a3429;
    --hts-stock-no-bg: #f8e7e2;
    --hts-outofstock-btn-bg: #ffffff;
    --hts-input-border: #7d8592;
    --hts-empty-code-color: #e3e6eb;
}

@media (max-width: 520px) {
    :root {
        /* 16px de fiecare parte: sub atât, cardurile și tabelele Woo ating marginea ecranului. */
        --hts-shell: min(100% - 2rem, 1296px);
    }
}

/* Archivo variabil — wght 400–900, wdth 100–125, latin + latin-ext */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/archivo-variable.woff2') format('woff2-variations'),
        url('../fonts/archivo-variable.woff2') format('woff2');
    font-weight: 400 900;
    font-stretch: 100% 125%;
    font-style: normal;
    font-display: swap;
}

/* JetBrains Mono variabil — wght 400–500, latin + latin-ext */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2-variations'),
        url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}