/* ==========================================================================
   tokens.css — Design tokens for Elektro Gerlach GmbH
   Concept: "Präzises Elektrohandwerk am Bodensee" — engineering precision.
   Charcoal + steel greys, signal-orange accent (from the real logo, used <5%),
   monospaced spec labels, circuit-trace signature line, oversized numerals.
   ========================================================================== */

:root {
  /* --- Colour: steel/charcoal trade palette, signal-orange as the one accent --- */
  --c-bg:        #f3f4f6;   /* cool paper / off-white page */
  --c-surface:   #ffffff;   /* cards, raised surfaces */
  --c-surface-2: #e7eaee;   /* light steel inset */
  --c-ink:       #14181f;   /* near-black text */
  --c-ink-2:     #2a313c;   /* secondary heading ink */
  --c-muted:     #5a6472;   /* slate body / captions */
  --c-line:      #d3d8df;   /* hairlines / grid */
  --c-line-soft: #e4e8ed;

  /* Dark bands (hero, footer, CTA) */
  --c-dark:      #14181f;
  --c-dark-2:    #1c222c;
  --c-dark-line: #2e3742;
  --c-on-dark:       #eef1f4;
  --c-on-dark-muted: #9aa6b4;

  /* Brand + signal accent */
  --c-brand:      #1c222c;  /* graphite brand */
  --c-accent:     #ff6a00;  /* signal orange — sparing */
  --c-accent-600: #e85f00;
  --c-accent-200: #ffe2cc;
  --c-accent-tint:#fff3eb;

  /* Status colour for the live-rating dot */
  --c-ok: #2fae66;

  /* --- Fluid type scale (ratio ~1.25, clamps from 360→1280) --- */
  --step--2: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.95rem);
  --step-0:  clamp(1rem, 0.94rem + 0.30vw, 1.15rem);
  --step-1:  clamp(1.2rem, 1.10rem + 0.50vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 2.0rem);
  --step-3:  clamp(1.73rem, 1.48rem + 1.25vw, 2.7rem);
  --step-4:  clamp(2.07rem, 1.68rem + 1.95vw, 3.6rem);
  --step-5:  clamp(2.49rem, 1.90rem + 2.95vw, 4.8rem);
  --step-6:  clamp(2.99rem, 2.05rem + 4.7vw, 6.4rem);

  /* --- Type families (system stacks — no CDN) --- */
  --font-display: "Helvetica Neue", "Arial Narrow", Arial, system-ui, sans-serif;
  --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --tracking-label: 0.18em;

  /* --- Spacing scale (ratio 1.5) --- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.25rem;
  --sp-xl:  3.375rem;
  --sp-2xl: 5rem;
  --sp-3xl: 7.5rem;

  /* --- Radius / border / shadow --- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;
  --bd: 1px solid var(--c-line);
  --bd-dark: 1px solid var(--c-dark-line);

  --shadow-1: 0 1px 2px rgba(20, 24, 31, 0.06), 0 2px 6px rgba(20, 24, 31, 0.05);
  --shadow-2: 0 8px 24px rgba(20, 24, 31, 0.10);
  --shadow-3: 0 20px 50px rgba(20, 24, 31, 0.16);
  --shadow-accent: 0 10px 30px rgba(255, 106, 0, 0.28);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 520ms;

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);
  --measure: 64ch;
  --header-h: 72px;
}