/* ============================================================================
   Ablaufmeister — Design Tokens (production, extended)
   Extends branding/brand-tokens.css with: full type scale, spacing, semantic
   colors, motion, focus, warm dark mode, and contrast-audited usage rules.

   FONT: self-host Manrope (woff2, Latin subset) for performance + DSGVO.
   Do NOT load the Google Fonts CDN in production (German privacy grey area).
   Replace the @font-face src paths below with your local files.
   ============================================================================ */

/* --- Self-hosted variable font (preferred over Google CDN) ----------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;            /* variable range */
  font-display: swap;
  src: url("/fonts/manrope-variable.woff2") format("woff2");
}

:root {
  /* ---- Core palette (from brand) ---------------------------------------- */
  --brand-ivory:        #f8f6f1;   /* page background (warm white)           */
  --brand-surface:      #ffffff;   /* cards                                   */
  --brand-surface-soft: #f0ebe3;   /* bands / alt sections                    */
  --brand-graphite:     #132131;   /* headings + body text                    */
  --brand-muted:        #5d6874;   /* secondary text (AA on ivory ~5.4:1)     */
  --brand-petrol-900:   #155f5f;   /* primary action                          */
  --brand-petrol-700:   #207a73;   /* hover / lighter brand                   */
  --brand-sage:         #8da784;   /* DECORATIVE ONLY — fails as text         */
  --brand-amber:        #d99a3d;   /* ACCENT ONLY, sparingly — fails as text  */
  --brand-line:         #e5ded2;   /* hairline borders                        */

  /* ---- Extended semantic / utility -------------------------------------- */
  --brand-petrol-tint:  rgba(32, 122, 115, 0.10); /* icon chips, soft fills   */
  --brand-amber-tint:   rgba(217, 154, 61, 0.14); /* accent highlight bg      */
  --brand-success:      #3e7d4f;   /* checkmarks / success text (AA on white) */
  --brand-danger:       #b3402e;   /* form errors (AA on white)               */
  --brand-text-on-amber:#132131;   /* text on amber fills = graphite (~7:1)   */
  --brand-text-on-dark: #f2f4f3;
  --brand-focus:        #207a73;   /* focus ring color                        */

  /* ---- Typography -------------------------------------------------------- */
  --font-brand: "Manrope", "Inter", system-ui, Arial, sans-serif;

  --fs-display: clamp(2.4rem, 5vw, 4.5rem);     /* H1 hero      */
  --fs-h2:      clamp(1.8rem, 3.2vw, 2.75rem);  /* section head */
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);    /* card title   */
  --fs-lead:    clamp(1.06rem, 1.6vw, 1.35rem); /* subline      */
  --fs-body:    1.0625rem;                       /* 17px         */
  --fs-small:   0.9375rem;                       /* 15px         */
  --fs-micro:   0.8125rem;                       /* 13px eyebrow */

  --lh-tight: 1.03;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.04em;

  /* ---- Spacing (8px base) ------------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;
  --section-pad: clamp(64px, 9vw, 128px);

  /* ---- Radius / elevation ------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 14px;   /* cards cap here (brand rule) */
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm:   0 4px 14px rgba(19, 33, 49, 0.06);
  --shadow-soft: 0 18px 45px rgba(19, 33, 49, 0.08);

  /* ---- Layout ------------------------------------------------------------ */
  --container: 1120px;
  --measure: 64ch;     /* body text line-length cap */
  --measure-h1: 18ch;

  /* ---- Motion (respect prefers-reduced-motion) --------------------------- */
  --motion-fast: 140ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ---- Active theme aliases (flipped in dark mode) ----------------------- */
  --bg: var(--brand-ivory);
  --surface: var(--brand-surface);
  --surface-soft: var(--brand-surface-soft);
  --text: var(--brand-graphite);
  --text-muted: var(--brand-muted);
  --line: var(--brand-line);
  --primary: var(--brand-petrol-900);
  --primary-hover: var(--brand-petrol-700);
}

/* ============================================================================
   WARM dark mode — deliberately warm, not cool-slate (stays human, on-brand).
   Auto via prefers-color-scheme; manual override via [data-theme="dark"].
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #15191c;
    --surface:      #1e2428;
    --surface-soft: #20272b;
    --text:         #f2f4f3;
    --text-muted:   #a9b2b0;
    --line:         #313a3d;
    --primary:      #3e9b92;  /* lightened petrol for contrast on dark */
    --primary-hover:#54b3a9;
    --shadow-soft:  0 18px 45px rgba(0, 0, 0, 0.45);
    --shadow-sm:    0 4px 14px rgba(0, 0, 0, 0.35);
  }
}
[data-theme="dark"] {
  --bg:           #15191c;
  --surface:      #1e2428;
  --surface-soft: #20272b;
  --text:         #f2f4f3;
  --text-muted:   #a9b2b0;
  --line:         #313a3d;
  --primary:      #3e9b92;
  --primary-hover:#54b3a9;
  --shadow-soft:  0 18px 45px rgba(0, 0, 0, 0.45);
  --shadow-sm:    0 4px 14px rgba(0, 0, 0, 0.35);
}

/* ============================================================================
   Base
   ============================================================================ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-brand);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; color: var(--text); }
h1 { font-size: var(--fs-display); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); max-width: var(--measure-h1); }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }

p { max-width: var(--measure); }

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

.lead { font-size: var(--fs-lead); font-weight: 500; color: var(--text-muted); }

/* ---- Layout helpers ------------------------------------------------------ */
.shell { width: min(var(--container), calc(100% - 32px)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.band {
  background: var(--surface-soft);
  border-block: 1px solid var(--line);
}

/* ============================================================================
   Components
   ============================================================================ */

/* Buttons ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding-inline: 22px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--primary); color: #fff;
  font: 700 var(--fs-small)/1 var(--font-brand);
  text-decoration: none; cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
.btn:hover  { background: var(--primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn--secondary {
  background: transparent; color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--secondary:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--primary); }

/* Cards -------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-6);
}
.card--interactive { transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.card--interactive:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft), var(--shadow-sm); }

/* Icon chip ---------------------------------------------------------------- */
.icon-chip {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-petrol-tint); color: var(--primary);
}

/* Accent (amber) — use sparingly; text on amber must be graphite ----------- */
.accent-fill { background: var(--brand-amber); color: var(--brand-text-on-amber); }
.accent-soft { background: var(--brand-amber-tint); color: var(--text); }

/* Bento grid --------------------------------------------------------------- */
.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
.bento > .tile--lg { grid-column: span 2; grid-row: span 2; }
.bento > .tile--md { grid-column: span 2; }
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento > .tile--lg,
  .bento > .tile--md { grid-column: auto; grid-row: auto; }
}

/* Forms -------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field > label { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.field > input,
.field > textarea {
  min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: 400 var(--fs-body)/1.4 var(--font-brand);
}
.field > input:focus-visible,
.field > textarea:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 2px; border-color: var(--primary); }
.field--error > input { border-color: var(--brand-danger); }
.field__error { color: var(--brand-danger); font-size: var(--fs-small); }

/* Sticky header (matured, single-use translucency) ------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* Mobile sticky action bar (thumb zone) ------------------------------------ */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: var(--space-2);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .action-bar { display: none; } }

/* Chat demo bubbles -------------------------------------------------------- */
.bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--fs-small); }
.bubble--user   { margin-left: auto; background: var(--brand-petrol-tint); color: var(--text); border-bottom-right-radius: 4px; }
.bubble--helper { margin-right: auto; background: var(--surface-soft); color: var(--text); border-bottom-left-radius: 4px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--fs-small); color: var(--text); cursor: pointer;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }

/* ============================================================================
   Motion utilities + reduced-motion guard
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

/* Signature "ring draws" — animate stroke-dashoffset on the process loop SVG */
.ring-seg { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ring-seg.is-drawn { transition: stroke-dashoffset var(--motion-slow) var(--ease-out); stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .ring-seg { stroke-dashoffset: 0; }
}

/* ============================================================================
   Accessibility
   ============================================================================ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-focus); outline-offset: 2px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}