/* ==========================================
   FOUNDATION.CSS
   Core Design Tokens & Global Defaults
   ========================================== */

/* ==========================================
   DESIGN TOKENS
   ========================================== */

:root {

  /* ---------- Colors ---------- */

  /* ---------- Brand Accents (from Nav / Footer) ---------- */

  /* Cyan Accent */
  --color-accent-cyan: #00d9ff;
  --color-accent-cyan-strong: #00b8d4;
  --color-accent-cyan-soft: rgba(0, 217, 255, 0.12);
  --color-accent-cyan-border: rgba(0, 217, 255, 0.3);

  --gradient-accent-cyan: linear-gradient(
    135deg,
    #00d9ff 0%,
    #00b8d4 100%
  );

  /* ---------- Status (Accessible pairs: very light bg + dark text) ---------- */

  /* SUCCESS (Green) – Soft UI */
--color-success: #10b981;
--color-success-bg: rgba(16, 185, 129, 0.1);
--color-success-solid-bg: rgba(16, 185, 129, 0.9);
--color-success-text: #10b981;
--color-success-border: rgba(16, 185, 129, 0.3);

/* INFO (Blue) – Soft UI */
--color-info: #2196f3;
--color-info-bg: rgba(33, 150, 243, 0.1);
--color-info-text: #2196f3;
--color-info-border: rgba(33, 150, 243, 0.3);

/* WARNING (Amber) – Soft UI */
--color-warning: #f59e0b;
--color-warning-bg: rgba(245, 158, 11, 0.12);
--color-warning-text: #f59e0b;
--color-warning-border: rgba(245, 158, 11, 0.35);

/* ERROR (Red) – Soft UI */
--color-error: #dc2626;
--color-error-bg: rgba(220, 38, 38, 0.1);
--color-error-text: #dc2626;
--color-error-border: rgba(220, 38, 38, 0.3);

/* NEUTRAL (Gray) – Soft UI */
--color-neutral: #64748b;
--color-neutral-bg: rgba(100, 116, 139, 0.12);
--color-neutral-text: #475569;
--color-neutral-border: rgba(100, 116, 139, 0.25);

  /* ---------- Button Accents ---------- */

--color-accent-pink: #ff4ecd;

--gradient-accent-primary-hover: linear-gradient(
  135deg,
  var(--color-accent-cyan) 0%,
  var(--color-accent-pink) 100%
);

  /* Anthracite / Dark UI */
  --color-dark-900: #0a1929;
  --color-dark-800: #21252b;
  --color-dark-700: #282c34;

  --gradient-dark: linear-gradient(
    135deg,
    rgba(40, 44, 52, 0.98) 0%,
    rgba(33, 37, 43, 1) 100%
  );

  /* Accent Effects */
  --shadow-accent-cyan: 0 2px 12px rgba(0, 217, 255, 0.4);

  /* Brand / Primary */
  --color-primary: #667eea;
  --color-primary-hover: #5568d3;
  --color-primary-strong: #2196F3;

  /* Text */
  --color-text-primary: #0f172a;
  --color-text-secondary: #64748b;
  --color-text-muted: #64748b;
  --color-text-inverted: #ffffff;

  /* Backgrounds */
  --color-bg-default: #ffffff;
  --color-bg-muted: #f8fafc;
  --color-bg-glass: rgba(255, 255, 255, 0.9);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Borders & Shadows */
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.15);
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* ---------- Typography ---------- */

  --font-family-base: 'Atkinson', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --font-weight-light: 200;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: 0.875rem;
  --font-size-sm: 0.95rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.35rem;
  --font-size-xl: 1.75rem;
  --font-size-xxl: 2.5rem;
  --font-size-hero: 3.5rem;

  --line-height-tight: 1.3;
  --line-height-base: 1.6;
  --line-height-loose: 1.75;

  /* ---------- Spacing ---------- */

/* ---------- Spacing ---------- */

--space-2xs: 0.25rem;  /* 4px */
--space-xs: 0.5rem;    /* 8px */
--space-sm: 0.75rem;   /* 12px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-2xl: 3rem;     /* 48px */
--space-3xl: 4rem;     /* 64px */

/* Section / Layout spacing */
--space-4xl: 6rem;     /* 96px */
--space-5xl: 8rem;     /* 128px */

  /* ---------- Radius ---------- */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-round: 999px;

  /* ---------- Z-Index System ---------- */

  --z-background: 0;
  --z-content: 1;
  --z-ui: 10;
  --z-sticky: 90;
  --z-header: 100;
  --z-overlay: 1000;
  --z-system: 10000;

  /* ---------- Breakpoints ---------- */

  --bp-sm: 600px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-nav-compact: 1100px;
  --bp-xl: 1280px;
}

/* ==========================================
   FONT DEFINITIONS
   ========================================== */

@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson';
  src: url('../assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================
   RESET & GLOBAL BASE
   ========================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;

}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background: var(--color-bg-default);
  position: relative;
  overflow-x: hidden;
}

/* ==========================================
   TYPOGRAPHY DEFAULTS
   ========================================== */

h1,
h2,
h3 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin: 0;
}

h1 {
  font-size: var(--font-size-xxl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

p,
li {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin: 0 0 var(--space-md) 0;
}

strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* ==========================================
   TYPOGRAPHY SYSTEM – UXI.one
   Semantic Type Scale & Weights
   ========================================== */

/* ---------- Headings ---------- */

h1 {
  font-weight: var(--font-weight-semibold); /* 600 */
  font-size: var(--font-size-hero);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

h2 {
  font-weight: var(--font-weight-semibold); /* 600 */
  font-size: var(--font-size-xl);
  line-height: 1.3;
}

h3 {
  font-weight: var(--font-weight-semibold); /* bewusst leichter als Bold */
  font-size: var(--font-size-lg);
  line-height: 1.35;
}

/* ---------- Body & Text ---------- */

p,
li {
  font-weight: var(--font-weight-regular); /* 400 */
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

/* Strong nur gezielt – klare Hierarchie */
strong {
  font-weight: var(--font-weight-semibold); /* 600 */
  color: var(--color-text-primary);
}

/* ---------- Meta / Context Text ---------- */
/* z. B. Hero-Meta, Stat Labels, kleine Zusatzinfos */

.meta-item,
.stat-label,
.stat-sublabel,
.section-header__subtitle,
.problem-conclusion {
  font-weight: var(--font-weight-light); /* 200 */
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---------- Small UI Text ---------- */
/* z. B. Card Meta, Footer Details */

.text-muted,
.small,
.footer small {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---------- Buttons ---------- */

.button {
  font-weight: var(--font-weight-semibold); /* 600 */
  letter-spacing: 0.01em;
}

.button--secondary {
  font-weight: var(--font-weight-regular); /* 400 */
}

/* ---------- Footer Typography ---------- */

footer h4,
footer .footer-title {
  font-weight: var(--font-weight-semibold); /* 600 */
  font-size: var(--font-size-base);
  color: var(--color-text-inverted);
}

footer p,
footer a {
  font-weight: var(--font-weight-light); /* 200 */
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}

footer a:hover {
  color: #ffffff;
}

/* ---------- Accessibility: ensure contrast ---------- */

@media (prefers-contrast: more) {
  .meta-item,
  .stat-label,
  .section-header__subtitle {
    color: var(--color-text-secondary);
  }
}

/* ==========================================
   LINKS
   ========================================== */

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* ==========================================
   GLOBAL TYPE SCALE ADJUSTMENT (MOBILE)
   ========================================== */

@media (max-width: 768px) {
  body {
    font-size: 0.95rem;
  }
}

/* ==========================================
   GLOBAL BACKGROUND CANVAS LAYER
   ========================================== */

#wave-bg,
.wave-canvas,
canvas.wave-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: var(--z-background);
  pointer-events: none;
}

/* ==========================================
   ICON SEMANTICS
   ========================================== */

.icon--success { color: var(--color-success-text); }
.icon--info    { color: var(--color-info-text); }
.icon--warning { color: var(--color-warning-text); }
.icon--danger  { color: var(--color-error-text); }

/* ==========================================
   Service Pricing / CTA Card
   ========================================== */

.card--cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
}

/* Pricing Content */
.pricing-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  flex: 1;
}

.pricing-content > i {
  font-size: 2.5rem;
  color: var(--color-success-text);
  flex-shrink: 0;
}

.pricing-content strong {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.pricing-note {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .card--cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .card--cta .button {
    width: 100%;
    justify-content: center;
  }
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}