/* =========================================================
   Ismail Dönertas — Homepage
   Design-System „LICHTWERK" (persönliche Marke)
   Quelle der Wahrheit: Vault/Ich & Positionierung/Marke-Lichtwerk/
   Schibsted Grotesk + Instrument Serif · gedämpfte Neutralbasis ·
   Glasmorphismus · Akzent Blau→Violett (sparsam, Sub-Style Executive)
   ========================================================= */

/* Marken-Schriften — SELF-HOSTED (kein Google-CDN, keine Drittübertragung). */
@import url('./lichtwerk-fonts.css');

:root {
  /* ---------- Lichtwerk-Tokens ---------- */
  --lw-bg-1:#D3D6DD; --lw-bg-2:#BFC3CC; --lw-bg-3:#B2B6C1;
  --lw-ink:#12141C; --lw-text-secondary:#464D5E;
  --lw-line: rgba(40,48,90,0.12);
  --lw-glass: rgba(255,255,255,0.62);
  --lw-glass-soft: rgba(255,255,255,0.34);
  --lw-glass-border: rgba(255,255,255,0.90);
  --lw-shadow: 0 14px 40px rgba(40,48,90,0.14);
  --lw-accent-grad: linear-gradient(120deg,#3D7BFF,#7B5CFF);
  --lw-accent-1:#3D7BFF; --lw-accent-2:#7B5CFF;
  --lw-font-display:"Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --lw-font-accent:"Instrument Serif", Georgia, serif;

  /* ---------- Legacy-Variablen (von Komponenten genutzt) → auf Lichtwerk gemappt ---------- */
  --ink:        #12141C;
  --ink-muted:  #3C4354;  /* abgedunkelt für WCAG-AA auf nacktem Verlauf (vorher #464D5E ~4,2:1) */
  --ink-soft:   #565E72;  /* abgedunkelt für WCAG-AA (vorher #6E7689 ~3,0:1) */
  --paper:      transparent;                    /* Sektionen zeigen den Seiten-Verlauf */
  --paper-alt:  rgba(255,255,255,0.30);         /* alternierendes Glasband */
  --paper-pure: rgba(255,255,255,0.62);         /* Karten = Glas */
  --rule:        rgba(40,48,90,0.12);
  --rule-strong: rgba(40,48,90,0.22);
  --accent:        #3D7BFF;
  --accent-hover:  #2E63E0;
  --accent-soft:   rgba(61,123,255,0.12);
  --link:        var(--ink);
  --link-hover:  var(--accent-1);
  --selection:   rgba(123,92,255,0.20);

  /* Schriften: Headlines UND Text = Schibsted. Instrument nur für Akzentwörter (.accent-word / em in Headlines). */
  --font-serif: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-sans:  "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* Type-Skala (Schibsted ist kompakter → leicht angepasst) */
  --fs-eyebrow: 12px; --fs-caption: 13px; --fs-body: 17px; --fs-lead: 19px;
  --fs-h4: 22px; --fs-h3: 28px; --fs-h2: 38px; --fs-h1: 60px; --fs-display: 88px;
  --lh-display: 1.02; --lh-headline: 1.06; --lh-prose: 1.6; --lh-ui: 1.45;
  --tr-eyebrow: 0.10em; --tr-headline: -0.025em; --tr-display: -0.035em;

  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:32px;
  --space-6:48px; --space-7:72px; --space-8:120px; --space-9:160px;

  --radius-0:0px; --radius-1:999px; --radius-2:18px;   /* Buttons=Pill, Karten=18px */
  --border-hairline:1px solid var(--rule);
  --border-strong:1px solid var(--rule-strong);
  --shadow-none:none; --shadow-hover: var(--lw-shadow);
  --ease: cubic-bezier(0.2,0.6,0.2,1); --dur-fast:200ms; --dur-base:400ms; --dur-slow:700ms;
  --measure-prose:640px; --measure-wide:1080px; --header-h:72px;
}

/* =========================================================
   Basis
   ========================================================= */
.sb-page {
  background:
    radial-gradient(120% 80% at 50% -12%, var(--lw-bg-1) 0%, var(--lw-bg-2) 56%, var(--lw-bg-3) 100%)
    fixed;
  color: var(--lw-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
}

/* Headlines = Schibsted display (700, eng) */
.sb-display { font-family: var(--font-serif); font-weight:700; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--tr-display); color:var(--ink); }
.sb-h1 { font-family: var(--font-serif); font-weight:700; font-size:var(--fs-h1); line-height:var(--lh-headline); letter-spacing:var(--tr-headline); color:var(--ink); }
.sb-h2 { font-family: var(--font-serif); font-weight:700; font-size:var(--fs-h2); line-height:var(--lh-headline); letter-spacing:var(--tr-headline); color:var(--ink); }
.sb-h3 { font-family: var(--font-sans); font-weight:600; font-size:var(--fs-h3); line-height:var(--lh-headline); color:var(--ink); letter-spacing:-0.01em; }
.sb-h4 { font-family: var(--font-sans); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-headline); color:var(--ink); }

.sb-eyebrow { font-family:var(--font-sans); font-weight:600; font-size:var(--fs-eyebrow); line-height:1; letter-spacing:var(--tr-eyebrow); text-transform:uppercase; color:var(--ink-muted); }
.sb-lead { font-family:var(--font-sans); font-weight:400; font-size:var(--fs-lead); line-height:1.55; color:var(--ink-muted); }
.sb-body { font-family:var(--font-sans); font-weight:400; font-size:var(--fs-body); line-height:var(--lh-prose); color:var(--ink); }
.sb-caption { font-family:var(--font-sans); font-weight:400; font-size:var(--fs-caption); line-height:var(--lh-ui); color:var(--ink-muted); }
.sb-quote { font-family:var(--lw-font-accent); font-style:italic; font-weight:400; font-size:30px; line-height:1.35; color:var(--ink); }

/* ---------- Akzentwort: Instrument Serif kursiv + Blau→Violett-Verlauf ---------- */
.sb-display em, .sb-h1 em, .sb-h2 em, .accent-word, em.accent-word {
  font-family: var(--lw-font-accent) !important;
  font-style: italic !important;
  font-weight: 400;
  background: var(--lw-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}

/* ---------- Lichtwerk-Utilities ---------- */
.lw-glass {
  background: var(--lw-glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--lw-glass-border);
  border-radius: var(--radius-2);
  box-shadow: var(--lw-shadow);
}
.lw-pill {
  display:inline-flex; align-items:center; gap:8px;
  background: var(--lw-glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border:1px solid var(--lw-glass-border); border-radius:var(--radius-1);
  padding:8px 16px; font-size:13px; font-weight:600; color:var(--ink-muted);
}
.lw-btn-primary {
  font-family:var(--font-sans); font-size:15px; font-weight:600;
  background: var(--lw-accent-grad); color:#fff;
  padding:13px 26px; border-radius:var(--radius-1); border:none;
  box-shadow:0 10px 26px rgba(70,70,230,0.30);
  transition: transform .15s ease, box-shadow .15s ease; text-decoration:none; display:inline-block;
}
.lw-btn-primary:hover { transform: translateY(-2px); }
.lw-btn-ghost {
  font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--ink);
  background: var(--lw-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border:1px solid var(--lw-glass-border); border-radius:var(--radius-1);
  padding:13px 26px; text-decoration:none; display:inline-block; transition: transform .15s ease;
}
.lw-btn-ghost:hover { transform: translateY(-2px); }
.lw-kpi {
  font-family:var(--font-serif); font-weight:700; font-size:70px; line-height:0.92; letter-spacing:-0.04em;
  background: var(--lw-accent-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

::selection { background: var(--selection); }