/* ============================================================================
   MixBox — design tokens
   ----------------------------------------------------------------------------
   ORIGINÁLNÍ hodnoty z design systému Claude Design (namespace
   MixBoxDesignSystem_0e04a2), sloučené ze tří zdrojových souborů:
     cdDesign/_ds/mixbox-new-0e04a215-…/tokens/colors.css
     cdDesign/_ds/mixbox-new-0e04a215-…/tokens/typography.css
     cdDesign/_ds/mixbox-new-0e04a215-…/tokens/spacing.css

   Barvy jsou odvozené z produkčního webu mixbox.cz (OpenCart theme004):
   #FFB103 šafrán (ceny a odkazy), #5B6D57 šalvějová zeleň, #626060 šedá textu,
   #C81908 červená. Tento soubor je JEDINÉ místo s konkrétními hodnotami —
   ve stránkách a komponentách vždy jen `var(--token)`.

   Při aktualizaci design systému přegenerovat tento soubor ze zdrojů výše.
   ========================================================================== */

/* Písma se načítají z vlastního serveru — viz css/fonts.css (wwwroot/fonts). */

:root {
    /* --- Primary — šalvějová zeleň (z loga a webu mixbox.cz) -------------- */
    --primary-50: #eef1ec;
    --primary-100: #d9e0d3;
    --primary-200: #b3c1a8;
    --primary-300: #8ba283;
    --primary-400: #6e8566;
    --primary-500: #5b6d57;
    --primary-600: #4c5c49;
    --primary-700: #3d4a3a;
    --primary-800: #2f3a2d;
    --primary-900: #232b22;

    /* --- Accent — šafrán (barva cen a odkazů na webu) --------------------- */
    --saffron-50: #fff8e6;
    --saffron-100: #ffecb8;
    --saffron-200: #ffdc7a;
    --saffron-300: #ffc946;
    --saffron-400: #ffb103;
    --saffron-500: #f5a300;
    --saffron-600: #d98a00;
    --saffron-700: #b06e00;
    --saffron-800: #835200;
    --saffron-900: #5c3a00;

    /* --- Neutrály — teplý papír a inkoust --------------------------------- */
    --ink-900: #221f1c;
    --ink-700: #3f3b37;
    --ink-500: #626060;
    --ink-300: #a5a4a4;
    --ink-200: #cfcdcb;
    --paper-0: #fffdf9;
    --paper-50: #fbf7f0;
    --paper-100: #f4eee2;
    --paper-200: #e9e1d2;

    /* --- Stavové barvy ---------------------------------------------------- */
    --success-500: #3f7d4a;
    --success-100: #e2f0e3;
    --error-500: #c81908;
    --error-100: #fbe3df;
    --warning-500: #b06e00;
    --warning-100: #fff2d9;
    --discount-500: #d1483a;
    --discount-100: #fbe6e2;

    /* --- Sémantické role -------------------------------------------------- */
    --surface-page: var(--paper-50);
    --surface-card: var(--paper-0);
    --surface-sunken: var(--paper-100);
    --surface-primary: var(--primary-500);
    --surface-accent: var(--saffron-400);
    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-500);
    --text-muted: var(--ink-300);
    --text-on-primary: var(--paper-0);
    --text-on-accent: var(--ink-900);
    --border-default: var(--ink-200);
    --border-strong: var(--primary-300);
    --link-color: var(--primary-600);
    --link-hover: var(--saffron-500);
    --price-color: var(--primary-700);
    --discount-color: var(--discount-500);

    /* --- Typografie -------------------------------------------------------- */
    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;
    --text-4xl: 48px;
    --text-5xl: 64px;

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.55;

    --tracking-tight: -0.01em;
    --tracking-wide: 0.04em;
    --tracking-widest: 0.12em;

    /* --- Odsazení (8px škála), rádiusy, stíny, layout ---------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgba(34,31,28,.06), 0 4px 12px rgba(34,31,28,.06);
    --shadow-hover: 0 6px 20px rgba(34,31,28,.12);
    --shadow-popover: 0 12px 32px rgba(34,31,28,.16);

    --container-max: 1280px;
    --grid-gap: var(--space-6);
}