/* ds-tokens.css — Design system tokens extracted from Figma
 * Source of truth: Figma designs
 * Prefix: --ds-*
 * Rules:
 *   - Only generic, reusable tokens (colors, spacing, radii, shadows)
 *   - No component-specific values
 *   - No fallback values in component CSS — tokens are always loaded
 */

:root {
    /* Colors — populated from Figma */
    --ds-color-primary: #e2001a;
    --ds-color-text-primary: #262626;
    --ds-color-text-secondary: #666666;
    --ds-color-link: #1e5c99;
    --ds-color-link-hover: #0f2e4d;
    --ds-color-link-eshop: #0071b8;
    --ds-color-border-default: #e0e0e0;
    --ds-color-border-hover: #8c8c8c;
    --ds-color-border-hover-subtle: #b3b3b3;
    --ds-color-bg-card: #ffffff;
    --ds-color-bg-card-hover: #fafafa;
    --ds-color-bg-detail: #f7f7f7;
    --ds-color-bg-surface: #fafafa;
    --ds-color-bg-catalog: #eef5fc;
    --ds-color-bg-section: #f5f9fc;
    --ds-color-bg-menu-button: #464646;
    --ds-color-text-heading: #000000;
    --ds-color-nav-link: #e2001a;
    --ds-color-text-on-dark: #ffffff;
    --ds-color-primary-hover: #8a0010;
    --ds-color-bg-disabled: #fafafa;
    --ds-color-text-disabled: #8c8c8c;
    --ds-color-bg-button-hover: #f2f2f2;
    --ds-color-bg-button-active: #e0e0e0;
    --ds-color-border-focus: #448fda;
    --ds-color-text-placeholder: #8c8c8c;
    --ds-color-overlay: rgba(0, 0, 0, 0.5);
    --ds-color-overlay-light: rgba(255, 255, 255, 0.4);
    --ds-color-icon-bg-danger: #ffebed;
    --ds-color-icon-danger: #b30015;
    --ds-color-icon-bg-warning: #fff5d6;
    --ds-color-icon-warning: #d19d00;
    --ds-color-icon-warning-bright: #f7a000;
    --ds-color-bg-warning: #ffeee2;
    --ds-color-border-warning: rgba(0, 0, 0, 0.1);
    --ds-color-text-warning: #623c00;
    --ds-color-text-success: #34743f;
    --ds-color-progress-success: #59b569;
    --ds-color-text-danger: #b30015;
    --ds-color-bg-summary: #fffbf0;
    --ds-color-toggle-on: #34743f;
    --ds-color-text-price-accent: #e2001a;
    --ds-color-border-dashed: #b3b3b3;
    --ds-color-bg-badge-in-progress: #ffd8bc;
    --ds-color-bg-badge-new: #f2f2f2;
    --ds-color-text-badge-new: #666666;
    --ds-color-bg-badge-new-highlight: #ffc108;
    --ds-color-text-badge-new-highlight: #000000;
    --ds-color-text-badge-in-progress: #623c00;
    --ds-color-bg-input-addon: #f2f2f2;
    --ds-color-icon-info: #2672bf;
    --ds-color-icon-warning-dark: #c27c00;
    --ds-color-text-field-label: #174573;
    --ds-color-text-info: #174573;
    --ds-color-text-success-dark: #275830;
    --ds-color-text-danger-dark: #8a0010;
    --ds-color-bg-info: #eef5fc;
    --ds-color-bg-success: #dcefdf;
    --ds-color-bg-danger: #ffebed;
    --ds-color-icon-muted: rgba(0, 0, 0, 0.5);
    --ds-color-icon-muted-hover: rgba(0, 0, 0, 0.8);
    --ds-color-icon-subtle: rgba(0, 0, 0, 0.4);
    --ds-color-bg-dropzone-active: rgba(68, 143, 218, 0.08);
    --ds-color-border-divider: rgba(0, 0, 0, 0.2);

    /* Spacing scale */
    --ds-spacing-3xs: 2px;
    --ds-spacing-2xs: 4px;
    --ds-spacing-xs: 6px;
    --ds-spacing-sm: 8px;
    --ds-spacing-md: 12px;
    --ds-spacing-lg: 16px;
    --ds-spacing-xl: 24px;
    --ds-spacing-2xl: 32px;
    --ds-spacing-3xl: 48px;

    /* Border radius */
    --ds-radius-xs: 2px;
    --ds-radius-sm: 4px;
    --ds-radius-md: 6px;
    --ds-radius-lg: 8px;
    --ds-radius-xl: 12px;
    --ds-radius-full: 800px;

    /* Shadows */
    --ds-shadow-hover: 0px 8px 24px rgba(0, 0, 0, 0.05);
    --ds-shadow-focus: 0 0 0 3px rgba(38, 115, 191, 0.5);
    --ds-shadow-focus-success: 0 0 0 3px rgba(52, 116, 63, 0.5);
    --ds-shadow-modal: 0px 12px 24px rgba(0, 0, 0, 0.06);
    --ds-shadow-card: 0px 8px 16px rgba(0, 0, 0, 0.05);
    --ds-shadow-selected: 0 0 0 3px var(--ds-color-accent-hover); /* solid accent ring, matches selected border */
    --ds-shadow-sidebar: 2px 0 5px rgba(0, 0, 0, 0.1);
    --ds-shadow-panel: -6px 0 20px rgba(0, 0, 0, 0.1);

    /* Typography — only defined here as deliberate design system decisions */
    --ds-font-size-3xs: 10px;
    --ds-font-size-2xs: 12px;
    --ds-font-size-xs: 13px;
    --ds-font-size-sm: 14px;
    --ds-font-size-body: 16px;
    --ds-font-size-subtitle: 18px;
    --ds-font-size-title: 21px;
    --ds-font-size-hero-sm: 26px;
    --ds-font-size-heading: 27px;
    --ds-font-size-hero: 32px;
    --ds-font-weight-normal: 400;
    --ds-font-weight-medium: 500;
    --ds-font-weight-bold: 700;
    --ds-line-height-heading: 1.2;
    --ds-line-height-body: 1.5;
    --ds-line-height-subtitle: 1.5;
    --ds-line-height-2xs: 16px;
    --ds-line-height-xs: 18px;
    --ds-line-height-sm: 20px;
    --ds-line-height-interactive: 22px;
    --ds-line-height-lg: 25px;

    /* Semantic colors */
    --ds-color-success: #22c55e;
    --ds-color-primary-active: #5c000b;
    --ds-color-secondary-hover: #262626;
    --ds-color-secondary-active: #1a1a1a;
    --ds-color-accent-hover: #41914e;
    --ds-color-accent-active: #275830;
    --ds-color-base-hover: rgba(0, 0, 0, 0.05);
    --ds-color-base-active: #e0e0e0;
    --ds-color-danger: #dc2626;
    --ds-color-border-subtle: rgba(0, 0, 0, 0.05);
    --ds-color-border-section: rgba(0, 0, 0, 0.1);
    --ds-color-bg-danger-hover: rgba(226, 0, 26, 0.08);
    --ds-color-bg-success-hover: rgba(52, 116, 63, 0.08);
    --ds-color-bg-validation-error: #fff5ee;
    --ds-color-border-validation-error: #ffa200;

    /* Layout */
    --ds-width-content-max: 1540px;
    --ds-width-text-max: 960px;
    /* Sticky aside column — summary aside + fields-view nav */
    --ds-width-aside: 293px;
    /* Sticky top offset clearing the sticky DeksmartHeader. The header's real
       height is content-dependent (breadcrumb trail can wrap), so at runtime
       ds-sticky-header-offset.js measures it and sets
       --dynamic-sticky-header-offset; this static token is only the no-JS /
       pre-JS fallback consumers reach through var(). Responsive (overridden at
       the canonical breakpoints below the :root block): 65px below 768 (12px
       paddings + 40px brand min-height + 1px border), 73px from 768 up (16px
       paddings), 80px from 1536 up (legacy header height + breathing room for
       the aside columns). */
    --ds-sticky-header-offset: 65px;
    /* Small control height — matches the ds-input Small size:
       line-height-sm 20px + 2× spacing-xs 6px + 2× 1px border = 34px */
    --ds-control-height-sm: 34px;
    /* Calculator field select — fixed desktop width so stacked selects share
       one left edge (the field grid's auto control track otherwise sizes each
       select to its widest option) */
    --ds-field-select-width: 320px;
    /* Calculator field unit suffixes ("m", "ks", "m2", "%") — uniform addon
       width so stacked values align; a longer suffix widens its addon, except
       in the product row's quantity box, where it truncates */
    --ds-field-addon-min-width: 40px;
    /* Product row quantity box — narrowest the number input gets beside a long
       package unit */
    --ds-quantity-input-min-width: 56px;

    /* Z-index layering scale — every z-index in design-system CSS must use one
       of these tiers (never a magic number). Tooltips sit below modals on
       purpose: page tooltips must not cover a modal overlay, while a tooltip
       inside a modal still paints above the overlay because it lives in the
       overlay's stacking context. */
    --ds-z-sticky: 100;
    --ds-z-fab: 200;
    --ds-z-sidebar-backdrop: 290;
    --ds-z-sidebar: 300;
    --ds-z-tooltip: 900;
    --ds-z-modal: 1000;
    --ds-z-dialog: 1100;
    --ds-z-eshop-modal: 1200;
    --ds-z-toast: 1300;
    --ds-z-banner: 1400;
    --ds-z-spinner: 1500;
    --ds-z-consent: 1600;
    --ds-z-error: 1700;
}

/* Responsive overrides for --ds-sticky-header-offset — see the token's
   definition comment above for the derivation of each value. */
@media (min-width: 768px) {
    :root {
        --ds-sticky-header-offset: 73px;
    }
}

@media (min-width: 1536px) {
    :root {
        --ds-sticky-header-offset: 80px;
    }
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS — canonical scale (source of truth)

   Derived from the DEKSMART 2.0 Figma (labeled breakpoint rulers). These are
   NOT CSS custom properties on purpose: CSS variables cannot be used inside
   @media conditions (`@media (min-width: var(--x))` is invalid and silently
   fails). With no SCSS/PostCSS build step, the only honest mechanism is a
   documented convention enforced by a test.

   Mobile-first — prefer min-width; max-width is permitted at the next
   breakpoint minus 1 (see the max-width row below). Use ONLY these values:

     min-width   SM 640   MD 768   LG 1024   XL 1280   2XL 1536
     max-width   639      767      1023      1279      1535
                 (max-width form = the next breakpoint minus 1)

   Above 1540px the content container (--ds-width-content-max) is centered and
   only the side margins grow — there is no further layout breakpoint.

   These values are enforced by BreakpointScaleTest (Tests/Deksmart.Application
   .Tests/Architecture): any off-scale @media width in design-system CSS fails
   the build. Eshop-borrowed CSS (Eshop*.razor.css, eshop-scoped.css) is
   exempt — it keeps its own foreign breakpoints and must not couple to this.
   ============================================================================ */