/* ============================================================
   CLAIVO — Colors & Type tokens
   The single source of truth for the Claivo brand foundations.
   Brand brief overrides the Relume export: Inter everywhere,
   Jura 300 for the wordmark only. Swiss spelling, Sie-Ansprache.
   ============================================================ */

/* ---- Fonts (self-hosted brand files) ----
   Inter & Jura are variable fonts uploaded by the brand.
   The woff2 weight files remain as a fallback for older engines. */
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Inter_opsz_wght_.ttf") format("truetype-variations"),
       url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Jura";
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Jura_wght_.ttf") format("truetype-variations"),
       url("fonts/jura-300.woff2") format("woff2");
}

:root {
  /* ============ RAW BRAND PALETTE (strict) ============ */
  --navy:    #0A1622;   /* Primär, dunkle Sektionen */
  --navy-2:  #162338;   /* Hover auf Navy */
  --red:     #DC0000;   /* Akzent, sparsam (wichtigster CTA) */
  --gold:    #C4A050;   /* sehr sparsam, edle Details */
  --cream:   #F5F3EF;   /* Haupt Hintergrund */
  --cream-2: #EDE9E3;   /* Sekundär Hintergrund, Cards */
  --white:   #FFFFFF;

  /* Supporting neutrals (derived, harmonious with navy/cream) */
  --slate:      #1E2840;  /* Deep Slate — tiefere dunkle Fläche */
  --steel:      #5B6573;  /* Supporting / sekundärer Text auf Cream */
  --steel-soft: #8C96A5;  /* tertiärer Text, Captions, Linien auf dunkel */
  --line:       rgba(10, 22, 34, 0.10);  /* Trennlinie auf Cream */
  --line-dark:  rgba(255, 255, 255, 0.12); /* Trennlinie auf Navy */
  --red-hover:  #B80000;  /* Red CTA Hover */

  /* ============ SEMANTIC COLOR TOKENS ============ */
  /* Auf Cream (Standard, hell) */
  --bg:          var(--cream);
  --bg-alt:      var(--cream-2);
  --surface:     var(--white);     /* Cards heben sich leicht ab */
  --fg:          var(--navy);      /* Text auf Cream IMMER Navy, nie #000 */
  --fg-muted:    var(--steel);     /* sekundärer Text */
  --fg-subtle:   var(--steel-soft);/* captions / labels */
  --accent:      var(--red);
  --accent-2:    var(--gold);
  --border:      var(--line);

  /* Auf Navy (dunkle Sektionen) — via .on-dark Klasse */
  --d-bg:        var(--navy);
  --d-surface:   var(--navy-2);
  --d-fg:        var(--cream);
  --d-fg-muted:  rgba(245, 243, 239, 0.66);
  --d-fg-subtle: rgba(245, 243, 239, 0.45);
  --d-border:    var(--line-dark);

  /* ============ TYPOGRAPHY ============ */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo: "Jura", "Inter", sans-serif;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Editorial type scale (desktop). Calm, large, never shouty. */
  --display:    clamp(3rem, 6vw, 5.25rem);  /* 84px — Hero */
  --h1:         clamp(2.5rem, 4.4vw, 3.75rem); /* 60px */
  --h2:         clamp(2rem, 3.4vw, 3rem);      /* 48px */
  --h3:         2.5rem;   /* 40px */
  --h4:         2rem;     /* 32px */
  --h5:         1.625rem; /* 26px */
  --text-lg:    1.25rem;  /* 20px */
  --text-base:  1.125rem; /* 18px */
  --text-sm:    1rem;     /* 16px */
  --text-xs:    0.8125rem;/* 13px */

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;

  /* ============ RADII ============ */
  --r-sm: 8px;
  --r-md: 12px;   /* Cards: sanfter Radius 12–16px */
  --r-lg: 16px;
  --r-pill: 999px;
  --r-btn: 10px;

  /* ============ SHADOWS (dezent, kein harter Material-Look) ============ */
  --shadow-sm: 0 1px 2px rgba(10, 22, 34, 0.04), 0 1px 3px rgba(10, 22, 34, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 22, 34, 0.06), 0 2px 4px rgba(10, 22, 34, 0.04);
  --shadow-lg: 0 18px 40px rgba(10, 22, 34, 0.10), 0 4px 12px rgba(10, 22, 34, 0.05);
  --shadow-navy: 0 24px 60px rgba(10, 22, 34, 0.30);

  /* ============ SPACING (8px base) ============ */
  --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;
  --section-y: clamp(64px, 9vw, 112px);   /* vertikaler Sektionsabstand */
  --gutter: clamp(20px, 5vw, 64px);        /* horizontaler Seitenrand */
  --maxw: 1280px;

  /* ============ MOTION ============ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.16s var(--ease);
  --t: 0.22s ease;             /* Standard: all .22s ease */
  --t-slow: 0.4s var(--ease);
}

/* ============ BASE ELEMENT STYLES ============ */
.claivo {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.claivo h1, .claivo h2, .claivo h3, .claivo h4, .claivo h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.claivo .display { font-size: var(--display); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.claivo h1 { font-size: var(--h1); }
.claivo h2 { font-size: var(--h2); }
.claivo h3 { font-size: var(--h3); }
.claivo h4 { font-size: var(--h4); }
.claivo h5 { font-size: var(--h5); font-weight: var(--fw-bold); }
.claivo p  { margin: 0; }
.claivo .lead { font-size: var(--text-lg); color: var(--fg-muted); line-height: var(--lh-body); text-wrap: pretty; }

/* Eyebrow / kicker label above headings */
.claivo .eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

/* Dark-section inversion */
.claivo .on-dark,
.claivo.on-dark {
  background: var(--d-bg);
  color: var(--d-fg);
}
.claivo .on-dark h1, .claivo .on-dark h2, .claivo .on-dark h3,
.claivo .on-dark h4, .claivo .on-dark h5 { color: var(--d-fg); }
.claivo .on-dark .lead { color: var(--d-fg-muted); }
.claivo .on-dark .eyebrow { color: var(--gold); }