/* ============================================================
   aicx. Design System — Colors & Type
   Source: www.aicx.de
   ============================================================ */

/* ----- Fonts ---------------------------------------------------
   aicx.de uses a Framer-packaged sans (appears to be a geometric/
   humanist sans close to Geist / Inter with a tall x-height and
   straight terminals). Best available Google Font match: Geist.
   Fallback: Inter, system UI.
   TODO: Request actual brand font files from user.
   ---------------------------------------------------------------- */

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

:root {
  /* ===== Brand colors ===== */
  --aicx-coral:       #FF6868;   /* Primary accent — CTAs, links, headings-emphasis, logo */
  --aicx-coral-600:   #F04A4A;   /* Hover */
  --aicx-coral-700:   #D13030;   /* Press */
  --aicx-coral-100:   #FFDADA;   /* Tint — backgrounds, chips */
  --aicx-coral-50:    #FFF1F1;   /* Subtle surface tint */

  --aicx-ink:         #0E1116;   /* Primary text / headings */
  --aicx-ink-2:       #1A1F27;   /* Strong secondary */
  --aicx-graphite:    #3B4350;   /* Body secondary */
  --aicx-slate:       #5D6675;   /* Tertiary text, meta */
  --aicx-mute:        #8B94A3;   /* Muted text, placeholders */

  --aicx-line:        #E6E8EC;   /* Hairlines, dividers */
  --aicx-line-soft:   #EFF1F4;   /* Subtle separator */
  --aicx-surface:     #F6F7F9;   /* Panel surface, quiet bg */
  --aicx-surface-2:   #FBFBFC;   /* Ultra-subtle wash */
  --aicx-white:       #FFFFFF;

  /* ===== Semantic ===== */
  --aicx-success:     #10A371;
  --aicx-warning:     #E8A13A;
  --aicx-danger:      #DA2A1E;
  --aicx-info:        #2F6BFF;

  /* ===== Semantic tokens (light) ===== */
  --fg-1: var(--aicx-ink);
  --fg-2: var(--aicx-graphite);
  --fg-3: var(--aicx-slate);
  --fg-mute: var(--aicx-mute);
  --fg-accent: var(--aicx-coral);

  --bg-1: var(--aicx-white);
  --bg-2: var(--aicx-surface-2);
  --bg-3: var(--aicx-surface);
  --bg-accent-soft: var(--aicx-coral-50);

  --border-1: var(--aicx-line);
  --border-2: var(--aicx-line-soft);
  --border-accent: var(--aicx-coral);

  /* ===== Typography families ===== */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Geist', 'Inter', sans-serif;

  /* ===== Weights ===== */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-black: 800;

  /* ===== Type scale (fluid, px-based, marketing-leaning) ===== */
  --fs-display: clamp(48px, 6.2vw, 88px);
  --fs-h1: clamp(40px, 4.6vw, 64px);
  --fs-h2: clamp(30px, 3.2vw, 44px);
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-lead: 20px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-meta: 13px;
  --fs-caption: 12px;

  /* ===== Spacing scale (4px base) ===== */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ===== Radii ===== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ===== Shadows (soft, marketing-style) ===== */
  --shadow-xs: 0 1px 2px rgba(14, 17, 22, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 17, 22, 0.05), 0 1px 2px rgba(14, 17, 22, 0.04);
  --shadow-md: 0 10px 24px -12px rgba(14, 17, 22, 0.12), 0 2px 6px rgba(14, 17, 22, 0.04);
  --shadow-lg: 0 30px 60px -24px rgba(14, 17, 22, 0.18), 0 8px 20px -12px rgba(14, 17, 22, 0.08);
  --shadow-coral: 0 16px 40px -18px rgba(255, 104, 104, 0.55);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ===== Semantic type classes ===== */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.aicx-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}

.aicx-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.aicx-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.aicx-h3 {
  font-weight: var(--w-semibold);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.aicx-h4 {
  font-weight: var(--w-semibold);
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.aicx-eyebrow {
  font-weight: var(--w-medium);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--fg-3);
  text-transform: none; /* aicx. uses Title Case eyebrows, not UPPER */
}

.aicx-lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--fg-2);
  font-weight: var(--w-regular);
  text-wrap: pretty;
}

.aicx-body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}

.aicx-meta {
  font-size: var(--fs-meta);
  color: var(--fg-3);
  line-height: 1.45;
}

.aicx-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}

/* A red-word — aicx uses red accents on words like "KI-Agenten", "verzehnfachen" */
.aicx-accent-word { color: var(--aicx-coral); }

/* The brand "dot" — aicx. always ends with a period. This renders it as coral if needed. */
.aicx-brandmark .dot { color: var(--aicx-coral); }