/* ============================================================================
   SD-Link — Design-Tokens (site-weit)
   ----------------------------------------------------------------------------
   Verbindliche Token aus specs/design_handoff_produktseiten/code/site/
   colors_and_type.css. Laedt VOR sdlink-base/-home/-shop/-guide; die
   Seiten-Stylesheets verlassen sich auf diese Variablen. sdlink-home.css
   definiert (historisch) dieselben Werte nochmal lokal — identische Werte,
   harmlos.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Marke / Navy */
  --sd-navy-900: #0a1b2e;
  --sd-navy-800: #0f2742;
  --sd-navy-700: #163558;
  --sd-navy-600: #1f4878;
  --sd-navy-500: #2c5e95;
  --sd-navy-400: #5384b6;
  --sd-navy-300: #8fadcf;
  --sd-navy-200: #cfdce9;
  --sd-navy-100: #e7eef5;
  --sd-navy-050: #f4f7fa;

  /* Akzent / Amber (CTA, Sale, Ribbon) */
  --sd-amber-700: #b3590e;
  --sd-amber-600: #d76b14;
  --sd-amber-500: #ee8127;
  --sd-amber-100: #fde9d4;

  /* Sky (Info / Bluetooth) */
  --sd-sky-700: #0d6fb8;
  --sd-sky-600: #1a8cd8;
  --sd-sky-500: #4ba9e8;
  --sd-sky-100: #d8edfb;

  /* Neutral */
  --sd-ink: #0e1620;
  --sd-ink-2: #3b4654;
  --sd-ink-3: #6b7888;
  --sd-ink-4: #9aa6b4;
  --sd-line: #d7dde4;
  --sd-line-soft: #ebeef2;
  --sd-paper: #ffffff;
  --sd-paper-2: #fafbfc;

  /* Semantik */
  --sd-success: #1f8a5b;
  --sd-success-bg: #e6f4ee;
  --sd-warning: #c08a18;
  --sd-warning-bg: #fbf2da;
  --sd-danger: #b3322a;
  --sd-danger-bg: #f7e2df;
  --sd-info: var(--sd-sky-600);
  --sd-info-bg: var(--sd-sky-100);

  /* Semantische Aliasse */
  --fg-1: var(--sd-ink);
  --fg-2: var(--sd-ink-2);
  --fg-3: var(--sd-ink-3);
  --fg-muted: var(--sd-ink-4);
  --fg-inverse: #ffffff;
  --fg-brand: var(--sd-navy-700);
  --fg-link: var(--sd-navy-600);
  --fg-link-hover: var(--sd-amber-600);
  --bg-page: var(--sd-paper-2);
  --bg-surface: var(--sd-paper);
  --bg-sunken: var(--sd-navy-050);
  --bg-brand: var(--sd-navy-700);
  --bg-brand-deep: var(--sd-navy-900);

  /* Typografie */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Schatten */
  --shadow-1: 0 1px 2px rgba(14,22,32,.06), 0 1px 1px rgba(14,22,32,.04);
  --shadow-2: 0 2px 6px rgba(14,22,32,.07), 0 4px 12px rgba(14,22,32,.06);
  --shadow-3: 0 6px 16px rgba(14,22,32,.10), 0 12px 32px rgba(14,22,32,.08);
  --shadow-inset: inset 0 2px 4px rgba(14,22,32,.12);
  --shadow-focus: 0 0 0 3px rgba(44,94,149,.32);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}