/* Design tokens — extracted from ups-service.rbc.sm.ua (2026-04-25)
   Source: docs/project/service-center-style-notes.md
   All component CSS must reference these tokens. Never use hard-coded values. */

:root {
  /* Color — brand */
  --color-brand:        #e84545; /* accent red/coral — CTA buttons, links, highlights */
  --color-brand-dark:   #b91c1c; /* darker red — hover states, error */

  /* Color — surfaces */
  --color-bg:           #ffffff; /* page background (light body) */
  --color-bg-dark:      #000000; /* dark sections: utility bar, footer */
  --color-header-main:  #ffffff; /* main header row background (light) */
  --color-bg-subtle:    #f9fafb; /* alternating section backgrounds */
  --color-surface:      #ffffff; /* cards, panels */

  /* Color — text */
  --color-ink:          #111111; /* primary text on light */
  --color-ink-light:    #ffffff; /* primary text on dark — use sparingly (halation risk on large text blocks) */
  --color-utility-text: #e0e0e0; /* utility bar / dropdown text — softer than pure white, avoids halation */
  --color-muted:        #9ca3af; /* secondary/supporting text */

  /* Color — lines */
  --color-line:         #e5e7eb; /* borders, dividers */

  /* Color — status */
  --color-ok:           #16a34a; /* success / in-stock */
  --color-warn:         #f59e0b; /* warning / low-stock / ratings */

  /* Typography */
  --font-heading:       'Exo 2', system-ui, sans-serif;
  --font-body:          'Mulish', system-ui, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-base:   1.55;

  /* Spacing (4px grid) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, .14);

  /* Layout */
  --container-max:  1280px;
  --header-h:       64px;   /* desktop header height */
  --header-h-mob:   56px;   /* mobile header height */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}