/* SDK4NET Template - Design Tokens */

/* SDK4NET Theme CSS Variables */
body {
  /* Primary Colors */
  --sdk4net-primary: #024ad8;
  /* Interaktiv (Buttons, Links, Aktiv-Zustand): #024ad8, weiße Schrift 7:1.
     #296ef9 (--sdk4net-bright) nur für Flächen, weiße Schrift erreicht darauf nur 4,4:1. */
  --sdk4net-accent: #024ad8;
  --sdk4net-bright: #296ef9;
  --sdk4net-tint: #eef3ff;
  --sdk4net-text-body: #3d3d3d;
  --sdk4net-border-input: #c9c9c9;
  --sdk4net-on-dark: #e8e8e8;
  --sdk4net-on-dark-muted: #c9c9c9;
  --sdk4net-on-dark-brand: #7aa5ff;
  --sdk4net-hairline-dark: #3a3a3a;
  --sdk4net-accent-hover: #0e3191;
  --sdk4net-text-dark: #1a1a1a;
  --sdk4net-text-light: #ffffff;
  --sdk4net-text-muted: #636363;
  --sdk4net-bg-light: #f7f7f7;
  --sdk4net-bg-white: #ffffff;
  --sdk4net-bg-subtle: #e8e8e8;
  --sdk4net-surface: #ffffff;
  --sdk4net-border-light: #e8e8e8;
  --sdk4net-navy: #0b1020;

  /* Variante B „Control Plane“: dunkle Flächen (Kopf, Titelband, Hero, Fuß, dunkle Kacheln) */
  --sdk4net-night: #0b1020;
  --sdk4net-night-raised: #151d36;
  --sdk4net-night-line: #222a40;
  --sdk4net-night-edge: #2c3a66;
  --sdk4net-night-dot: #636b85;
  --sdk4net-on-dark-hover: rgba(122, 165, 255, 0.16);
  --sdk4net-on-blue-hover: rgba(255, 255, 255, 0.16);
  --sdk4net-light-hover: #dbe5ff;
  --sdk4net-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Magazin-Darstellung von News (.blogpost-content--feature in base.css) */
  --feature-accent: var(--sdk4net-bright);
  --feature-accent-text: var(--sdk4net-primary);
  --feature-tint: var(--sdk4net-bg-light);
  --feature-tint-border: var(--sdk4net-border-light);
  --feature-callout: var(--sdk4net-bg-light);
  --feature-callout-border: var(--sdk4net-border-light);
  --feature-border: var(--sdk4net-border-light);
  --feature-text: var(--sdk4net-text-dark);
  --feature-font-heading: var(--sdk4net-font-heading);

  /* Untermenue (.sub-navigation-* in base.css) */
  --subnav-bar-bg: var(--sdk4net-bg-light);
  --subnav-accent: var(--sdk4net-accent);
  --subnav-accent-text: var(--sdk4net-primary);
  --subnav-active-bg: var(--sdk4net-tint);
  --subnav-hover-bg: var(--sdk4net-bg-light);
  --subnav-text: var(--sdk4net-text-dark);
  --subnav-title: var(--sdk4net-text-dark);
  --subnav-label: var(--sdk4net-text-muted);
  --subnav-focus: var(--sdk4net-primary);
  --subnav-font-heading: var(--sdk4net-font-heading);

  /* Installierte App: Farbe der Safe-Areas oben (Navigation) und unten (Fußbereich) */
  --pwa-top-color: var(--sdk4net-night);
  --pwa-bottom-color: var(--sdk4net-night);
  /* Offline-Seite des Service Workers (pwa.js liest die Werte und übergibt sie beim Registrieren) */
  --pwa-top-text-color: var(--sdk4net-text-light);
  --pwa-link-color: var(--sdk4net-primary);
  --pwa-button-color: var(--sdk4net-primary);
  --pwa-button-text-color: var(--sdk4net-text-light);

  /* Navigation */
  --sdk4net-nav-bg: #0b1020;

  /* Typography */
  --sdk4net-font-heading: 'Manrope', sans-serif;
  --sdk4net-font-body: 'Manrope', sans-serif;
  --sdk4net-font-nav: 'Manrope', sans-serif;

  --sdk4net-font-size-h1: 56px;
  --sdk4net-font-size-h2: 32px;
  --sdk4net-font-size-h3: 24px;
  --sdk4net-font-size-body: 16px;
  --sdk4net-font-size-small: 14px;

  /* Spacing */
  --sdk4net-space-section: 80px;
  --sdk4net-space-large: 64px;
  --sdk4net-space-medium: 32px;
  --sdk4net-space-small: 16px;

  /* Border Radius */
  --sdk4net-radius-btn: 4px;
  --sdk4net-radius-card: 16px;
  --sdk4net-radius-modern: 16px;
  --sdk4net-radius-circle: 50%;
  --sdk4net-radius-input: 4px;

  /* Shadows */
  --sdk4net-shadow-card: 0 2px 8px rgba(26, 26, 26, 0.08);
  --sdk4net-shadow-light: 0 1px 4px rgba(26, 26, 26, 0.06);
  --sdk4net-shadow-subtle: 0 1px 3px rgba(26, 26, 26, 0.04);
  --sdk4net-shadow-dropdown: 0 8px 24px rgba(26, 26, 26, 0.12);
  --sdk4net-shadow-hover: 0 10px 25px rgba(2, 74, 216, 0.2);
  --sdk4net-focus-ring: 0 0 0 3px rgba(2, 74, 216, 0.15);

  /* Transitions */
  --sdk4net-transition: 0.5s ease-in-out;
  --sdk4net-transition-hover: 0.3s ease-in-out;
}