/* ==========================================================================
   NNB Neues Netz Berlin -- Design Tokens
   Philosophy: Corporate Tech Hybrid
   Anchor color: Logo Blue #009FE3 (HSL 200°, 100%, 45%)
   Accent: Teal #14b8a6 for KI differentiation
   Base spacing unit: 4px (tight, structured, Swiss-influenced)
   ========================================================================== */

/* ---------- Light Mode (default) ---------- */
:root {
  /* --- Color: Brand (derived from logo #009FE3) --- */
  --color-brand-50:             #eef8ff;
  --color-brand-100:            #d8eeff;
  --color-brand-200:            #b9e2ff;
  --color-brand-300:            #89d2ff;
  --color-brand-400:            #51b8ff;
  --color-brand-500:            #009FE3;       /* logo blue — anchor */
  --color-brand-600:            #0082c3;       /* primary actions */
  --color-brand-700:            #00679e;       /* hover states */
  --color-brand-800:            #005682;       /* active states */
  --color-brand-900:            #003a5c;       /* headings on light bg */
  --color-brand-950:            #00243d;       /* hero bg, footer bg */

  /* --- Color: Accent (Teal — KI differentiation) --- */
  --color-accent-50:            #effefb;
  --color-accent-100:           #c7fff3;
  --color-accent-200:           #90ffe8;
  --color-accent-300:           #50f5d6;
  --color-accent-400:           #2dd4bf;
  --color-accent-500:           #14b8a6;       /* primary accent */
  --color-accent-600:           #0d9488;       /* accent hover */
  --color-accent-700:           #0f766e;       /* accent active */

  /* --- Color: Backgrounds --- */
  --color-bg-primary:           #ffffff;
  --color-bg-secondary:         #f8fafc;       /* slate-50: cards, alternating sections */
  --color-bg-tertiary:          #f1f5f9;       /* slate-100: inputs, wells */
  --color-bg-inverse:           var(--color-brand-950);  /* dark sections */
  --color-bg-inverse-subtle:    #003350;       /* slightly lighter inverse for cards-on-dark */
  --color-bg-hero:              var(--color-brand-950);  /* hero background */

  /* --- Color: Text --- */
  --color-text-primary:         #0f172a;       /* slate-900 */
  --color-text-secondary:       #475569;       /* slate-600 */
  --color-text-tertiary:        #94a3b8;       /* slate-400: placeholders, captions */
  --color-text-inverse:         #f8fafc;       /* white-ish on dark backgrounds */
  --color-text-inverse-muted:   #b9e2ff;       /* brand-200: secondary text on dark */
  --color-text-link:            var(--color-brand-600);
  --color-text-link-hover:      var(--color-brand-700);

  /* --- Color: Actions --- */
  --color-action-primary:       var(--color-accent-500);
  --color-action-primary-hover: var(--color-accent-600);
  --color-action-primary-active:var(--color-accent-700);
  --color-action-secondary:     var(--color-brand-600);
  --color-action-secondary-hover:var(--color-brand-700);

  /* --- Color: Borders --- */
  --color-border-primary:       #e2e8f0;       /* slate-200 */
  --color-border-secondary:     #f1f5f9;       /* slate-100 */
  --color-border-focus:         var(--color-brand-500);
  --color-border-input:         #cbd5e1;       /* slate-300 */

  /* --- Color: Status --- */
  --color-status-success:       #16a34a;
  --color-status-success-bg:    #f0fdf4;
  --color-status-warning:       #d97706;
  --color-status-warning-bg:    #fffbeb;
  --color-status-error:         #dc2626;
  --color-status-error-bg:      #fef2f2;
  --color-status-info:          var(--color-brand-500);
  --color-status-info-bg:       var(--color-brand-50);

  /* --- Color: Surfaces --- */
  --color-surface-overlay:      rgba(0, 36, 61, 0.6);     /* brand-950 @ 60% */
  --color-surface-glass:        rgba(255, 255, 255, 0.92); /* sticky header */

  /* --- Spacing (4px base) --- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px — section padding */

  /* --- Typography --- */
  --font-family-display:  'Manrope', system-ui, -apple-system, sans-serif;
  --font-family-body:     'Manrope', system-ui, -apple-system, sans-serif;
  --font-family-mono:     'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;

  --font-size-xs:    0.75rem;    /* 12px */
  --font-size-sm:    0.875rem;   /* 14px */
  --font-size-base:  1rem;       /* 16px */
  --font-size-md:    1.125rem;   /* 18px */
  --font-size-lg:    1.25rem;    /* 20px */
  --font-size-xl:    1.5rem;     /* 24px */
  --font-size-2xl:   1.875rem;   /* 30px */
  --font-size-3xl:   2.25rem;    /* 36px — section headings */
  --font-size-4xl:   3rem;       /* 48px — hero mobile */
  --font-size-5xl:   3.75rem;    /* 60px — hero desktop */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  --line-height-tight:    1.15;   /* display headings */
  --line-height-snug:     1.3;    /* subheadings */
  --line-height-normal:   1.5;    /* body text */
  --line-height-relaxed:  1.7;    /* long-form reading */

  --letter-spacing-tight:  -0.025em;  /* hero headings */
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;   /* labels, badges, all-caps */

  /* --- Layout --- */
  --max-width-content:  42rem;    /* ~672px reading width */
  --max-width-wide:     72rem;    /* 1152px */
  --max-width-page:     80rem;    /* 1280px */

  --border-radius-sm:   0.375rem; /* 6px — inputs, small elements */
  --border-radius-md:   0.5rem;   /* 8px — buttons */
  --border-radius-lg:   0.75rem;  /* 12px — cards */
  --border-radius-xl:   1rem;     /* 16px — feature cards */
  --border-radius-2xl:  1.5rem;   /* 24px — hero visuals */
  --border-radius-full: 9999px;   /* pills, avatars */

  /* --- Shadows --- */
  --shadow-xs:    0 1px 2px rgba(0, 36, 61, 0.05);
  --shadow-sm:    0 1px 3px rgba(0, 36, 61, 0.08), 0 1px 2px rgba(0, 36, 61, 0.04);
  --shadow-md:    0 4px 6px rgba(0, 36, 61, 0.07), 0 2px 4px rgba(0, 36, 61, 0.04);
  --shadow-lg:    0 10px 15px rgba(0, 36, 61, 0.08), 0 4px 6px rgba(0, 36, 61, 0.04);
  --shadow-xl:    0 20px 25px rgba(0, 36, 61, 0.08), 0 8px 10px rgba(0, 36, 61, 0.04);
  --shadow-focus: 0 0 0 3px rgba(0, 159, 227, 0.35);  /* brand-500 @ 35% */
  --shadow-card-hover: 0 12px 24px rgba(0, 36, 61, 0.1), 0 4px 8px rgba(0, 36, 61, 0.05);

  /* --- Motion --- */
  --duration-instant:  50ms;
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --duration-slower:   600ms;

  --easing-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:         cubic-bezier(0.4, 0, 1, 1);
  --easing-out:        cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Breakpoints (reference, use in @media) --- */
  /* sm:   640px  — large phones */
  /* md:   768px  — tablets */
  /* lg:  1024px  — small desktop */
  /* xl:  1280px  — desktop */
  /* 2xl: 1536px  — wide desktop */
}

/* ---------- Dark Mode ---------- */
/* Note: Dark mode toggle is out of scope for V1.
   Tokens provided for future use and for sections that use
   the dark palette inline (hero, KI dark panel, footer). */

[data-theme="dark"] {
  --color-bg-primary:           #001a2e;
  --color-bg-secondary:         #002240;
  --color-bg-tertiary:          #003350;
  --color-bg-inverse:           #f8fafc;
  --color-bg-inverse-subtle:    #e2e8f0;
  --color-bg-hero:              #001220;

  --color-text-primary:         #f1f5f9;
  --color-text-secondary:       #94a3b8;
  --color-text-tertiary:        #64748b;
  --color-text-inverse:         #0f172a;
  --color-text-inverse-muted:   #475569;
  --color-text-link:            #51b8ff;
  --color-text-link-hover:      #89d2ff;

  --color-border-primary:       #003350;
  --color-border-secondary:     #002240;
  --color-border-focus:         #51b8ff;
  --color-border-input:         #004a6e;

  --color-action-primary:       #2dd4bf;
  --color-action-primary-hover: #50f5d6;
  --color-action-primary-active:#14b8a6;

  --color-status-success-bg:    #052e16;
  --color-status-warning-bg:    #422006;
  --color-status-error-bg:      #450a0a;
  --color-status-info-bg:       #002240;

  --color-surface-overlay:      rgba(0, 18, 32, 0.7);
  --color-surface-glass:        rgba(0, 26, 46, 0.92);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.3);
  --shadow-focus: 0 0 0 3px rgba(81, 184, 255, 0.4);
  --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary:           #001a2e;
    --color-bg-secondary:         #002240;
    --color-bg-tertiary:          #003350;
    --color-bg-inverse:           #f8fafc;
    --color-bg-inverse-subtle:    #e2e8f0;
    --color-bg-hero:              #001220;

    --color-text-primary:         #f1f5f9;
    --color-text-secondary:       #94a3b8;
    --color-text-tertiary:        #64748b;
    --color-text-inverse:         #0f172a;
    --color-text-inverse-muted:   #475569;
    --color-text-link:            #51b8ff;
    --color-text-link-hover:      #89d2ff;

    --color-border-primary:       #003350;
    --color-border-secondary:     #002240;
    --color-border-focus:         #51b8ff;
    --color-border-input:         #004a6e;

    --color-action-primary:       #2dd4bf;
    --color-action-primary-hover: #50f5d6;
    --color-action-primary-active:#14b8a6;

    --color-status-success-bg:    #052e16;
    --color-status-warning-bg:    #422006;
    --color-status-error-bg:      #450a0a;
    --color-status-info-bg:       #002240;

    --color-surface-overlay:      rgba(0, 18, 32, 0.7);
    --color-surface-glass:        rgba(0, 26, 46, 0.92);

    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-xl:    0 20px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 3px rgba(81, 184, 255, 0.4);
    --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  }
}

/* ---------- Utility Classes ---------- */

.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--border-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}