/* IoT42 — Design Tokens
 * Senior IoT & Automotive Connectivity Consulting
 * v0.1 — May 2026  ·  aus dem IoT42 Design System
 */

:root {
  /* ── Brand: Signal Blue ────────────────────────────────────────── */
  --color-primary-50:  #eef4fb;
  --color-primary-100: #d6e6f5;
  --color-primary-200: #a7c7ea;
  --color-primary-300: #6ea4dc;
  --color-primary-400: #3d83cb;
  --color-primary-500: #1f6abb; /* Base — buttons, links */
  --color-primary-600: #155396;
  --color-primary-700: #114175;
  --color-primary-800: #0d3258;
  --color-primary-900: #07203c;

  /* ── Ink / Neutral (cool graphite) ─────────────────────────────── */
  --color-ink-0:   #ffffff;
  --color-ink-50:  #f6f7f9;
  --color-ink-100: #ebedf2;
  --color-ink-200: #d9dde5;
  --color-ink-300: #b8bfcc;
  --color-ink-400: #8a93a3;
  --color-ink-500: #5a6478;
  --color-ink-600: #3e4759;
  --color-ink-700: #2a3243;
  --color-ink-800: #1a212f;
  --color-ink-900: #0d121c;

  /* ── Accent: Signal Amber (data-light / highlight) ─────────────── */
  --color-amber-300: #fbd57f;
  --color-amber-400: #f5b740;
  --color-amber-500: #ec9d18;
  --color-amber-600: #c47e0a;

  /* ── Semantic ──────────────────────────────────────────────────── */
  --color-success: #1aa86b;
  --color-warning: #ec9d18;
  --color-danger:  #d64539;
  --color-info:    #1f6abb;

  /* ── Surfaces ──────────────────────────────────────────────────── */
  --surface-canvas:  var(--color-ink-50);
  --surface-card:    var(--color-ink-0);
  --surface-sunken:  var(--color-ink-100);
  --surface-inverse: var(--color-ink-900);

  /* ── Type ──────────────────────────────────────────────────────── */
  --font-sans:  "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-serif: "IBM Plex Serif", Georgia, serif;

  /* Type scale (1.250 — Major Third), 16px base */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.01em;

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

  /* ── Radius ────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(13, 18, 28, 0.06);
  --shadow-sm: 0 1px 3px rgba(13, 18, 28, 0.08), 0 1px 2px rgba(13, 18, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(13, 18, 28, 0.08), 0 2px 4px rgba(13, 18, 28, 0.04);
  --shadow-lg: 0 12px 32px rgba(13, 18, 28, 0.12), 0 4px 8px rgba(13, 18, 28, 0.06);
  --shadow-focus: 0 0 0 3px rgba(31, 106, 187, 0.28);

  /* ── Layout ────────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;

  --border-hairline: 1px solid var(--color-ink-200);
  --border-strong:   1px solid var(--color-ink-300);

  /* ── Motion ────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.5, 0, 0.5, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}