/* =========================================================
   AI-Cycle — Foundations
   Tinte, Knochenweiss, ein Akzent. Schweizer Disziplin.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---- Color: foundation ---- */
  --ink:           #14140F;   /* primary fg — tiefe Tinte, nicht reines Schwarz */
  --ink-2:         #2A2A24;   /* secondary fg */
  --ink-3:         #5C5C54;   /* tertiary fg / muted */
  --ink-4:         #8A8A80;   /* quaternary fg / placeholder */

  --bone:          #FFFFFF;   /* primary bg — pure white, fresh */
  --bone-2:        #F5F4EF;   /* secondary surface — leicht dichter, warm hint */
  --paper:         #FFFFFF;   /* lichter Hintergrund / cards on bone */
  --concrete:      #E8E6DD;   /* Beton-Grau / Trenner, ruhige Flächen */

  --rule:          #14140F1F; /* hairline auf bone */
  --rule-strong:   #14140F40; /* stärkere Linie */

  /* ---- Color: accent (genau eine Akzentfarbe) ---- */
  --ocher:         #C2541C;   /* Industrieorange / warmes Ocker — Handwerksakzent */
  --ocher-deep:    #9B3F12;   /* Press-State / Ink */
  --ocher-soft:    #E8B07F;   /* sehr dezente Tönung für Flächen */

  /* ---- Semantic foreground ---- */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --fg-on-ink: var(--bone);
  --fg-accent: var(--ocher);

  /* ---- Semantic background ---- */
  --bg-1: var(--bone);
  --bg-2: var(--paper);
  --bg-3: var(--bone-2);
  --bg-ink: var(--ink);

  /* ---- Type families ---- */
  --font-sans:    "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", Times, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (Swiss disciplined, restrained) ---- */
  --fs-display:   clamp(56px, 7vw, 112px);
  --fs-h1:        clamp(40px, 4.4vw, 72px);
  --fs-h2:        clamp(28px, 2.8vw, 44px);
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      17px;
  --fs-small:     14px;
  --fs-micro:     12px;

  /* ---- Line heights ---- */
  --lh-display:   0.96;
  --lh-heading:   1.08;
  --lh-body:      1.5;
  --lh-tight:     1.25;

  /* ---- Tracking ---- */
  --tr-display:   -0.025em;
  --tr-heading:   -0.018em;
  --tr-body:      -0.005em;
  --tr-mono-cap:  0.08em;

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

  /* ---- Radii: minimal. Swiss = sharp. ---- */
  --r-0: 0px;
  --r-1: 2px;       /* hairline rounding only */
  --r-2: 4px;       /* form fields max */
  --r-pill: 999px;  /* badges, used sparingly */

  /* ---- Borders ---- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ---- Shadow: matt, fast unsichtbar. Kein "lifted card" Look. ---- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 var(--rule);
  --shadow-2: 0 1px 2px rgba(20,20,15,.06), 0 0 0 1px var(--rule);

  /* ---- Motion: kurz, sachlich, kein Bounce ---- */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-in:       cubic-bezier(.4, 0, 1, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---- Layout ---- */
  --container:    1200px;
  --container-narrow: 760px;
  --gutter:       clamp(20px, 4vw, 64px);
}

/* =========================================================
   Element defaults
   ========================================================= */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 600; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 600; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight);   letter-spacing: var(--tr-heading); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight);   font-weight: 600; }

p  { margin: 0 0 1em 0; max-width: 64ch; text-wrap: pretty; }
p.lead { font-size: 20px; color: var(--fg-2); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule-strong);
  transition: text-decoration-color var(--dur-2) var(--ease-standard),
              color var(--dur-2) var(--ease-standard);
}
a:hover { text-decoration-color: var(--ocher); color: var(--ocher); }

/* Display heading — used sparingly for hero pathos */
.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 600;
  text-wrap: balance;
}

/* Pathos serif — for occasional pull-quote or one-word emphasis */
.pathos {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Mono — ROI, phase labels, code */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Eyebrow / label — uppercase mono, used for section markers */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tr-mono-cap);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Hairline rule */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

::selection { background: var(--ocher); color: var(--bone); }