/* ==========================================================================
   Elektrogrosshandel.wien – design tokens (single source of truth)
   Direction B "Industriell präzise" + grafts from A (owner decision 2026-09-23)

   Rules
   - Components use tokens only: no raw hex, no px font sizes, no z-index numbers.
   - Nothing is smaller than 12px (--text-12). Numbers use the system sans with
     tabular figures (--font-num + .num); monospace only inside code-entry
     inputs (quick order, import mapping, article editor).
   - Brand yellow = primary action (max. one per view), current step, logo mark.
   - Graphite = shop header rows 1+2 and the footer. Everything else is light.
   - Token names never reuse the legacy names of shop/css/styles.css or
     shop/css/admin.css, so old and new CSS can be loaded side by side.
     Old pages re-point their names via tokens-legacy-aliases.css.
   Contrast values are WCAG 2.x ratios against the surface named in brackets.
   ========================================================================== */
:root{
  color-scheme:light;

  /* ---- Neutrals: warm graphite (dark chrome) ---- */
  --color-graphite-950:#131416;
  --color-graphite-900:#1B1C1F;   /* header row 1, footer, snackbars */
  --color-graphite-800:#25262A;   /* header row 2, dark buttons */
  --color-graphite-700:#34363B;   /* hover on dark */
  --color-graphite-600:#4A4C52;   /* dividers on dark */
  --color-on-dark:#F4F3EE;        /* text on graphite (15.3:1 on 900) */
  --color-on-dark-muted:#B8B6AE;  /* secondary text on graphite (8.4:1 on 900, 7.4:1 on 800) */

  /* ---- Neutrals: warm paper (content) ---- */
  --color-ink:#1A1A17;            /* headings, primary text, focus ring (16.1:1 bg) */
  --color-text:#3D3A30;           /* body text (10.5:1 bg) */
  --color-muted:#6B6759;          /* secondary text (5.2:1 bg, 4.96:1 sunken) */
  --color-border:#E3E1DA;         /* dividers, card borders (decorative) */
  --color-border-strong:#CFCCC2;  /* table head rule, hover border */
  --color-border-control:#858171; /* form control outline (3.9:1 white, 3.4:1 sunken) */
  --color-bg:#F7F6F3;             /* page background */
  --color-surface:#FFFFFF;        /* cards, tables, inputs, admin top bar */
  --color-surface-sunken:#F1F0EB; /* table head, wells, chips */
  --color-surface-hover:#FAF9F6;  /* row hover, card footers */
  --color-scrim:rgba(19,20,22,.45);

  /* ---- Brand ---- */
  --color-brand:#F5B700;          /* primary button, logo mark, current step */
  --color-brand-hover:#E2A900;
  --color-brand-active:#CC9800;
  --color-on-brand:#1A1A17;       /* 9.7:1 on brand */
  --color-brand-tint:#FFF5D1;     /* selected rows, current-step background */
  --color-brand-line:#EBCF73;     /* border of brand-tinted areas (decorative) */
  --color-brand-text:#7A5600;     /* rare accent text on light (6.2:1 bg) */

  /* ---- Status: base = dots, icons, text on white/sunken; -ink = text on tint; -tint = fills ---- */
  --color-success:#1A7245; --color-success-ink:#17663F; --color-success-tint:#E6F2EB; /* 5.2:1 sunken (A graft) */
  --color-warning:#8E5400; --color-warning-ink:#7F4B00; --color-warning-tint:#FBF0DA; /* 5.4:1 sunken */
  --color-danger:#C0362C;  --color-danger-ink:#A12B22;  --color-danger-tint:#FBE8E6;  /* 4.8:1 sunken */
  --color-info:#2457C5;    --color-info-ink:#1D47A3;    --color-info-tint:#E8EEFB;    /* 5.7:1 sunken */

  /* ---- Focus: 2px ink ring with 2px offset; brand ring on graphite ---- */
  --focus-width:2px;
  --focus-offset:2px;
  --focus-color:var(--color-ink);
  --focus-color-on-dark:var(--color-brand);

  /* ---- Typography (system fonts only, nothing is downloaded) ---- */
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SFMono-Regular","Segoe UI Mono",Consolas,"Liberation Mono",monospace;
  --font-num:var(--font-sans);    /* Art.-Nr., EAN, prices: sans + tabular-nums (A graft) */
  --text-12:0.75rem;   /* minimum: meta, badges, table head, help text */
  --text-14:0.875rem;  /* UI base, tables, cards */
  --text-16:1rem;      /* body copy, inputs on touch devices */
  --text-18:1.125rem;  /* card price, section lead */
  --text-20:1.25rem;   /* section titles (h2) */
  --text-24:1.5rem;    /* page titles (h1) */
  --text-32:2rem;      /* product price, home headline on mobile */
  --text-40:2.5rem;    /* home headline on desktop only */
  --weight-regular:400; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.2; --leading-snug:1.35; --leading-body:1.5;
  --tracking-tight:-0.015em;

  /* ---- Spacing (4-pt grid) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --gutter:24px;

  /* ---- Radius: crisp (named by size to avoid the legacy --radius-* names) ---- */
  --radius-2:2px;      /* badges, chips, skeleton, thumbnails */
  --radius-4:4px;      /* buttons, inputs, cards, tables */
  --radius-8:8px;      /* dialogs, drawers, menus, snackbars */
  --radius-full:999px; /* switch, counters */

  /* ---- Sizes ---- */
  --control-sm:32px; --control-md:40px; --control-lg:48px;
  --touch-min:44px;    /* touch targets (pointer:coarse) */
  --target-min:24px;   /* WCAG 2.2 SC 2.5.8 minimum target */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;
  --container:1320px;
  --header-row-1:64px;          /* desktop: logo, search, actions */
  --header-row-2:44px;          /* desktop: main navigation */
  --header-m-row-1:56px;        /* mobile: menu, logo, account, cart (scrolls away) */
  --header-m-search:52px;       /* mobile: sticky search row */
  --checkout-header:64px;
  --admin-topbar-height:56px;
  --admin-sidebar-width:240px;
  --admin-bottomnav-height:60px;

  /* ---- Elevation: overlays only (menus, drawers, dialogs, snackbars) ---- */
  --shadow-overlay:0 12px 32px rgba(19,20,22,.18),0 2px 6px rgba(19,20,22,.10);
  --shadow-sticky:0 -1px 0 var(--color-border),0 -6px 16px rgba(19,20,22,.08); /* mobile buy bar */

  /* ---- Layers ---- */
  --z-raised:1;        /* stretched links, buy controls above card links */
  --z-sticky:40;       /* sticky table heads, section navs, bulk bar */
  --z-header:100;      /* site header, admin top bar */
  --z-dropdown:120;    /* search suggestions, mega menu, menus */
  --z-drawer:200;      /* non-modal panels (modal ones use the top layer) */
  --z-toast:300;       /* snackbars */
  --z-skip:1000;       /* skip link */

  /* ---- Motion: functional only ---- */
  --motion-fast:150ms;
  --motion-panel:220ms;
  --motion-skeleton:1.4s;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
}
@media (max-width:767px){
  :root{--gutter:16px}
}
@media (prefers-reduced-motion:reduce){
  :root{--motion-fast:0ms;--motion-panel:0ms;--motion-skeleton:0s}
}