/* =====================================================================
   EvoTechnik — TOKENS
   Layer 1 of 3 · Sprint 2 · 14 August 2026

   The single source of truth for the brand.
   Values are taken verbatim from project_files/brand.md.

   RULES FOR THIS FILE
   -------------------
   1. :root is the ONLY selector permitted here. No rules, no components.
   2. If a stylesheet needs a value, the value becomes a token first.
   3. Changing a value here changes it everywhere. That is the point.

   Load order: tokens.css -> base.css -> components.css
   ===================================================================== */

:root {

  /* ===================================================================
     COLOUR — brand.md §2
     Derived from the logo: #1E67B0 blue, #000000 black.
     =================================================================== */

  /* Primary */
  --blue:            #1E67B0;   /* primary — buttons, links, price, active */
  --blue-hover:      #17559A;   /* hover / pressed */
  --blue-dark:       #124478;   /* deep accent, gradients */
  --blue-soft:       #EAF2FA;   /* tinted backgrounds, active chips */
  --blue-line:       #C7DDF1;   /* subtle blue borders */

  /* Blue TEXT on a dark ground. --blue is 3.33:1 on --bg-dark, which
     fails WCAG AA; this is 5.98:1 and passes. Use it for any blue text
     or icon sitting on --bg-dark. --blue remains correct on light
     grounds, where it passes comfortably. brand.md §2. */
  --blue-on-dark:    #4E93D9;

  /* Ink */
  --black:           #000000;   /* wordmark black — headings, dark bands */
  --ink:             #14181F;   /* body text (softer than pure black) */
  --ink-2:           #3D4552;   /* secondary text */
  --grey:            #6B7280;   /* muted text, labels */
  --grey-light:      #9CA3AF;   /* placeholders */

  /* Surfaces */
  --white:           #FFFFFF;   /* literal white — text/icons on dark */
  --bg:              #FFFFFF;   /* page background */
  --bg-soft:         #F5F7FA;   /* section / card alt background */
  --bg-dark:         #0B0E13;   /* dark bands, header, footer */
  --bg-dark-soft:    #14181F;   /* raised band inside a dark section */
  --surface-dark:    #0D0D0D;   /* card surface on a black band */
  --line:            #E5E7EB;   /* borders, dividers */
  --input-line:      #D3D8E0;   /* form control border — brand.md §8 */

  /* Status.
     --green is the generic success colour.
     --wa-green is reserved for WhatsApp actions ONLY — never use it as a
     success colour, and never use --green on a WhatsApp button. */
  --green:           #16A34A;   /* in stock, success */
  --amber:           #D97706;   /* on order, pending */
  --red:             #DC2626;   /* out of stock, error, delete */
  --wa-green:        #25D366;   /* WhatsApp button ONLY */
  --wa-green-hover:  #1DB955;

  /* Discount badge. Same value as --red today, but a different meaning.
     Do not collapse these two — see brand.md §2. */
  --discount:        #DC2626;


  /* ===================================================================
     TYPEFACES — brand.md §5
     Archivo for headings, Barlow for body. Already in use across all
     nine design files.
     =================================================================== */

  --font-heading: Archivo, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    Barlow, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Heading weights */
  --fw-h-regular:  500;
  --fw-h-bold:     700;
  --fw-h-bolder:   800;
  --fw-h-black:    900;

  /* Body weights */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* Headings carry a tight tracking; labels carry a wide one. */
  --ls-heading:   -0.02em;
  --ls-label:      0.05em;
  --lh-body:       1.6;


  /* ===================================================================
     TYPE SCALE — brand.md §5
     Fluid via clamp(). Applied to elements in base.css.
     h6 is the only uppercase heading — a section eyebrow, not structure.
     =================================================================== */

  --fs-h1:     clamp(30px, 5vw,    46px);   /* Archivo 800 */
  --fs-h2:     clamp(24px, 3.4vw,  34px);   /* Archivo 800 */
  --fs-h3:     clamp(18px, 2.2vw,  22px);   /* Archivo 700 */
  --fs-h4:     clamp(16px, 1.8vw,  19px);   /* Archivo 700 */
  --fs-h5:     15px;                        /* Archivo 700 */
  --fs-h6:     13.5px;                      /* Archivo 700, uppercase */
  --fs-body:   15.5px;                      /* Barlow 400, line-height 1.6 */
  --fs-small:  13px;                        /* Barlow 500 */
  --fs-label:  12.5px;                      /* Barlow 700, uppercase */

  --ls-h6:      0.04em;                     /* h6 tracking — brand.md §5 */


  /* ===================================================================
     SPACING SCALE — brand.md §6
     Use ONLY these values. No 13px, no 27px.
     Named by their value so a misread is obvious at the call site.
     =================================================================== */

  --sp-4:    4px;
  --sp-8:    8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-56:  56px;
  --sp-72:  72px;
  --sp-96:  96px;

  /* Layout — brand.md §6 */
  --container-max:      1240px;
  --container-pad:      clamp(16px, 4vw, 32px);
  --section-pad-y:      clamp(48px, 7vw, 88px);


  /* ===================================================================
     RADII — brand.md §6
     =================================================================== */

  --r-sm:      5px;     /* inputs, buttons */
  --r-md:      8px;     /* cards */
  --r-lg:     12px;     /* modals, panels */
  --r-pill:  999px;     /* chips, badges */


  /* ===================================================================
     SHADOWS + FOCUS — brand.md §6
     =================================================================== */

  --sh-1:  0 1px  2px rgba(16, 24, 40, 0.05);   /* resting */
  --sh-2:  0 4px 14px rgba(16, 24, 40, 0.08);   /* cards */
  --sh-3:  0 18px 40px rgba(16, 24, 40, 0.14);  /* dropdowns, modals */

  /* The blue focus ring. Every focusable element gets this — brand.md §9. */
  --focus-ring: 0 0 0 3px rgba(30, 103, 176, 0.20);


  /* ===================================================================
     MOTION — brand.md §6
     160-200ms ease on colour, transform, shadow. Nothing slower.
     =================================================================== */

  --t-fast:  160ms ease;
  --t-base:  200ms ease;


  /* ===================================================================
     Z-INDEX SCALE — brand.md §6

     Six layers, nothing between them. Never write a raw z-index in a
     stylesheet — if a new layer is needed, add it to brand.md first.
     =================================================================== */

  --z-base:        0;   /* normal flow */
  --z-dropdown:   40;   /* nav dropdown, below the header */
  --z-header:     60;   /* sticky header */
  --z-drawer:     80;   /* mobile nav drawer */
  --z-modal:     100;   /* modals and their backdrop */
  --z-toast:     120;   /* toasts, skip link — above everything */
}

/* =====================================================================
   BREAKPOINTS — brand.md §7. Reference only; NOT tokens.

   Custom properties cannot be used in @media queries, so these must be
   written as literals wherever a media query appears. Keep them
   identical to these values:

     Mobile    < 640px          1 column
     Tablet    640px - 1023px   2 columns
     Desktop   >= 1024px        3-4 columns
     Wide      >= 1400px        container caps at 1240px, centred

   Build mobile first. Test at 320px — no horizontal scroll, ever.
   ===================================================================== */