/* ============================================================
   KAWELKE DESIGN SYSTEM — colors_and_type.css
   Abschleppdienst Kawelke e.K. · ADAC Mobilitätspartner
   ------------------------------------------------------------
   Industrial, high-visibility brand built on signal yellow,
   heavy black display type and a utilitarian neutral scale.
   ============================================================ */

/* ---- Fonts (Google Fonts — nearest matches to the logo lettering)
   Anton            → heavy condensed display ("KAWELKE" wordmark)
   Permanent Marker → rough brush accent ("ABSCHLEPPDIENST" script)
   Barlow           → utilitarian body / UI grotesque
   NOTE: the logo lettering is custom. These are substitutes —
   ask the brand owner for the original type if exact match needed. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Permanent+Marker&display=swap');

/* JetBrains Mono — self-hosted from /fonts (uploaded brand files) */
@font-face { font-family: 'JetBrains Mono'; font-weight: 100; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-Thin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 100; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-ThinItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 200; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-Light.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-LightItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 800; font-style: italic; font-display: swap; src: url('fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'); }

:root {
  /* ----------------------------------------------------------
     BRAND / RAW COLORS
     ---------------------------------------------------------- */
  --signal-yellow:   #FFD500;  /* primary — trucks, script, CTAs       */
  --signal-yellow-d: #E6BE00;  /* darker yellow for press/hover edges  */
  --adac-yellow:     #FFCC00;  /* ADAC partner mark                    */
  --ink-black:       #0A0A0A;  /* KAWELKE wordmark, primary text       */
  --true-black:      #000000;
  --partner-grey:    #5B5B5A;  /* ADAC partner box grey                */

  /* Safety / hazard accents (cones, warning livery) */
  --hazard-red:      #E2231A;  /* Notruf / emergency / danger          */
  --hazard-orange:   #F46A1F;  /* traffic cone orange                  */

  /* ----------------------------------------------------------
     NEUTRAL SCALE (warm-cool neutral grey, utilitarian)
     ---------------------------------------------------------- */
  --n-0:   #FFFFFF;
  --n-50:  #F6F6F4;
  --n-100: #ECECE8;
  --n-200: #DCDCD6;
  --n-300: #C3C3BC;
  --n-400: #9A9A93;
  --n-500: #767670;
  --n-600: #565652;
  --n-700: #3A3A37;
  --n-800: #222220;
  --n-900: #141413;
  --n-950: #0A0A0A;

  /* ----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ---------------------------------------------------------- */
  --bg-1:        var(--n-0);     /* page background           */
  --bg-2:        var(--n-50);    /* subtle raised / sections  */
  --bg-3:        var(--n-100);   /* cards on grey, wells      */
  --bg-inverse:  var(--n-950);   /* dark sections             */

  --fg-1:        var(--ink-black);  /* primary text           */
  --fg-2:        var(--n-600);      /* secondary text         */
  --fg-3:        var(--n-500);      /* muted / captions       */
  --fg-on-dark:  var(--n-0);        /* text on dark / black   */
  --fg-on-yellow:var(--ink-black);  /* text on signal yellow  */

  --border-1:    var(--n-200);   /* hairline dividers         */
  --border-2:    var(--n-300);   /* stronger borders / inputs */
  --border-strong: var(--ink-black);

  --accent:        var(--signal-yellow);
  --accent-press:  var(--signal-yellow-d);
  --danger:        var(--hazard-red);
  --success:       #2E7D32;
  --info:          var(--ink-black);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(255,213,0,0.55);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     ---------------------------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;       /* condensed heavy headlines */
  --font-script:  'Permanent Marker', 'Comic Sans MS', cursive; /* brush accent           */
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Fluid type scale (utilitarian, tight) */
  --fs-display:   clamp(2.75rem, 6vw, 5.5rem); /* @kind font */
  --fs-h1:        clamp(2rem, 4vw, 3.25rem); /* @kind font */
  --fs-h2:        clamp(1.5rem, 2.6vw, 2.25rem); /* @kind font */
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-lead:      1.25rem;
  --fs-body:      1rem;       /* 16px */
  --fs-sm:        0.875rem;   /* 14px */
  --fs-xs:        0.75rem;    /* 12px */
  --fs-eyebrow:   0.8125rem;  /* 13px overline labels */

  --lh-tight:   1.02; /* @kind other */
  --lh-snug:    1.15; /* @kind other */
  --lh-normal:  1.55; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.18em;  /* wide tracking for overlines */

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --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; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ----------------------------------------------------------
     RADII — small & boxy; the brand reads industrial, not soft
     ---------------------------------------------------------- */
  --radius-0: 0px;     /* default for hero blocks / livery panels */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — restrained, hard-edged
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.10);
  --shadow-md: 0 4px 14px rgba(10,10,10,0.12);
  --shadow-lg: 0 12px 32px rgba(10,10,10,0.18);
  --shadow-yellow: 0 6px 0 0 var(--signal-yellow-d); /* chunky offset for buttons */

  --container: 1200px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (apply via class .ds-* )
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: 400;            /* Anton is single-weight (heavy) */
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
}
.ds-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1);
  line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--tracking-display); color: var(--fg-1); }
.ds-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2);
  line-height: var(--lh-snug); text-transform: uppercase; color: var(--fg-1); }
.ds-h3 { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h3);
  line-height: var(--lh-snug); color: var(--fg-1); }
.ds-h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4);
  line-height: var(--lh-snug); color: var(--fg-1); }

.ds-script { font-family: var(--font-script); font-weight: 400; color: var(--signal-yellow);
  line-height: 1; transform: rotate(-2deg); display: inline-block; }

.ds-eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-2);
}
.ds-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead);
  line-height: var(--lh-normal); color: var(--fg-2); }
.ds-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body);
  line-height: var(--lh-normal); color: var(--fg-1); }
.ds-small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm);
  line-height: var(--lh-normal); color: var(--fg-2); }
.ds-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-1); }

/* Phone / Notruf number — the brand leads with its 24/7 line */
.ds-phone { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; color: var(--fg-1); }