/* UNOY Design System — Single Source of Truth
 * Konform zu unoy-design-system-pack/UNOY-Website-Design.md
 *
 * Enthält:
 *   - Farb-Tokens (Abschnitt 2)
 *   - Typografie-Referenzen (Abschnitt 3)
 *   - Layout-Grid-Tokens (Abschnitt 4)
 *   - Motion-Tokens (Abschnitt 9)
 *   - Focus-Ring + A11y-Grundlagen (Abschnitt 11)
 *
 * Einbinden pro Seite:
 *   <link rel="stylesheet" href="../shared/design-system.css">
 */

/* ============================================================
   Farb-Tokens — Abschnitt 2
   ============================================================ */
:root {
  /* Ink (Text) */
  --ink-900: #0A0A0B;     /* Headlines, primärer Text */
  --ink-700: #2B2B2D;     /* Sekundärer Text auf hellem BG */
  --ink-500: #6E6E72;     /* Meta, Labels, Captions */
  --ink-300: #C7C7CC;     /* Borders, Divider */
  --ink-200: #E8E8ED;     /* Hairline-Divider */

  /* Paper (Hintergrund) */
  --paper-00: #FFFFFF;    /* Karten, Inhaltsflächen */
  --paper-10: #FBFBFD;    /* Seiten-Hintergrund */
  --paper-20: #F5F5F7;    /* Sektions-Hintergrund */
  --surface-dark: #1A1F26;
  --surface-dark-elevated: #14181C;
  --gradient-dark: linear-gradient(180deg, #14181C 0%, #1A1F26 100%);

  --paper-30: #EDEDF0;    /* Card-Border, feinstes Delta */

  /* Accent (UNOY-Gold) */
  --accent-100: #FFF4D0;  /* Tint, Hover-Tint */
  --accent-500: #F5B800;  /* Primär-Akzent */
  --accent-600: #D99E00;  /* Hover-State */
  --accent-700: #A67800;  /* Dunkles Gold */
  --accent-on-dark: #E0AB2C; /* Reduzierte Chroma für Dark-Hero-Kontext */

  /* Ink-on-dark — solide Whites für Dark-Hero-Sektionen
     (ersetzt rohe rgba(255,255,255,…) damit Theme-Wechsel zentral steuerbar) */
  --ink-on-dark-900: #FFFFFF;     /* Title (≈ rgba(255,255,255,0.95)) */
  --ink-on-dark-800: #E8E5DD;     /* Strong text (≈ rgba 0.88/0.85) */
  --ink-on-dark-700: #C4C0B6;     /* Body (≈ rgba 0.72) */
  --ink-on-dark-600: #B0AC9F;     /* Caption (≈ rgba 0.65) */
  --ink-on-dark-500: #8E8A7E;     /* Mono-Eyebrow (≈ rgba 0.5) */
  --ink-on-dark-300: #57544B;     /* Faint (≈ rgba 0.25) */
  --ink-on-dark-100: #3E3B33;     /* Hairline (≈ rgba 0.12) */

  /* Status (archivisch, nie Ampel) */
  --status-approved: #1A7A47;
  --status-review: #8A6A1A;
  --status-blocked: #B13427;
  --status-archived: #6E6E72;

  /* Gruppen-Kontext (Skribe) */
  --skribe-green: #00885A;

  /* ============================================================
     Engine-Tonal-Palette · 2026-05-28
     Vier Engine-Identitätsfarben (Steel/Sand/Terra/Sage) mit tonaler Skala
     für Section-Backgrounds, Akzente und Dark-Variants.

     Verteilungs-Regel (Boardroom-Restraint):
     • Default-Background bleibt --paper-10 / --paper-20
     • 50er-Stops für Section-Tints — dezent, max. 1-2 pro Scroll
     • 200/400er für Engine-Card-Vollflächen (siehe .lp-engine-card--*)
     • 700/900er für Dark-Sections (z.B. hero--dark Varianten)
     • Gold (--accent-500) bleibt einziger gesättigter Akzent
     ============================================================ */

  /* Steel — Legal / Compliance / Governance */
  --steel-50:  #F5F7F8;       /* 2026-05-28: ausgeblichen für dezente Section-Tints */
  --steel-100: #DDE2E5;
  --steel-200: #C5CDD0;       /* aktueller Legal-Engine-Card-Ton */
  --steel-400: #8A9498;
  --steel-700: #4A535A;
  --steel-900: #1F2629;

  /* Sand — Claims / Mass-Workflow / Process */
  --sand-50:  #FAF9F5;        /* 2026-05-28: ausgeblichen */
  --sand-100: #F1ECDD;
  --sand-200: #E5DDC5;        /* aktueller Claims-Engine-Card-Ton */
  --sand-400: #BDB088;
  --sand-700: #6E6447;
  --sand-900: #3B3624;

  /* Terra — Back Office / Execution / Delivery */
  --terra-50:  #FBF4EE;       /* 2026-05-28: ausgeblichen */
  --terra-100: #F1D2B5;
  --terra-200: #E5B284;
  --terra-400: #D88A4F;       /* aktueller Back-Office-Engine-Card-Ton */
  --terra-700: #A06133;
  --terra-900: #5C3417;

  /* Sage — Ratgeber / Wissen / Editorial */
  --sage-50:  #F4F6F3;        /* 2026-05-28: ausgeblichen */
  --sage-100: #D5D9CF;
  --sage-200: #C0C5BA;
  --sage-400: #A8B0A0;        /* aktueller Ratgeber-Engine-Card-Ton */
  --sage-700: #5B6655;
  --sage-900: #2D3329;
}

/* --accent-on-dark bleibt als Token verfügbar (opt-in pro Element),
   wird aber NICHT automatisch in .hero--dark / .section--dark angewendet.
   Brand-Entscheidung 2026-05-27: gesättigtes #F5B800 bleibt in allen Kontexten,
   weil es zur UNOY-Markenpräsenz gehört. Reduzierte Chroma war ein
   theoretischer Vorschlag, wird abgelehnt. */

/* ============================================================
   Layout-Tokens — Abschnitt 4
   ============================================================ */
:root {
  --site-max: 1440px;       /* 2026-05-28: bewusst auf 1440px erweitert für mehr Atem ohne Verlust des Anchor-Gefühls */
  --content-max: 640px;     /* Fließtext-Lesbarkeit */
  --gutter-desktop: 32px;
  --gutter-mobile: 16px;
  --hero-pad-desktop: 220px;
  --hero-pad-mobile: 96px;
  --section-pad: 160px;          /* großzügiger vertikaler Rhythmus (legacy alias für --section-anchor) */
  --section-pad-mobile: 96px;    /* mobile zähmen — kein 160px auf 360px-Screens */

  /* Section-Spacing-Skala · L1 · 2026-05-27
     Vier semantische Stufen für variablen vertikalen Rhythmus zwischen Sektionen.
     Wachtell-editorial: gleichförmiges Padding nivelliert Inhalt — Variation schafft Hierarchie. */
  --section-tight:  64px;         /* kompakter Anker-Block, Übergang, Atempause */
  --section-medium: 96px;         /* Standard-Sektion */
  --section-loose:  128px;        /* großzügig, deutlicher visueller Schritt */
  --section-anchor: 160px;        /* dramatische Ausatmung, Anker-Sektion */
  --nav-height-desktop: 64px;
  --nav-height-mobile: 56px;

  --radius-pill: 9999px;
  --radius-card: 18px;
  --radius-input: 12px;
  --radius-image: 28px;
}

/* ============================================================
   Motion-Tokens — Abschnitt 9
   ============================================================ */
:root {
  --motion-ease: cubic-bezier(0.42, 0, 0.58, 1);
  /* Stärkeres Custom-Ease-Out für Entry-Animationen (Emil-Framework) */
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Material standard ease — Phase 9 · 2026-05-27 · dominante Kurve site-weit (280+ Inline) */
  --motion-material-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-micro: 120ms;
  --motion-fast: 200ms;           /* Phase 9 · Hover, Karussell-Highlight */
  --motion-standard: 240ms;
  --motion-medium: 300ms;         /* Phase 9 · Mid-Range State-Changes */
  --motion-section: 320ms; /* war 460ms — Emil: UI-Animationen < 300 ms; 320 ms ist die obere Sektions-Grenze */
  --motion-long: 400ms;           /* Phase 9 · Card-Hover-Stack, Karussell-Slide */
  --motion-reveal: 700ms;         /* Phase 9 · Scroll-Reveal-Animationen */

  /* Card-Shadows · Phase 8 · Wachtell-editorial Default
     statt Stacking mehrere Shadows: ein subtiler Mini-Shadow,
     ergänzt durch Hairline-Border auf der Card selbst. */
  --shadow-card: 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow-card-hover: 0 12px 32px -12px rgba(10, 10, 11, 0.10);
  --shadow-card-elevated: 0 16px 40px -16px rgba(10, 10, 11, 0.14);

  /* Font-Stack · zurück auf Original-Variante · 2026-05-27
     Inter (Display + Body)
     Inter Light 300 (Highlight-Akzent)
     JetBrains Mono (Mono)
     Hinweis: Token-System bleibt für künftige Wartung erhalten.            */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-italic: 'Inter', system-ui, sans-serif; /* 2026-05-28: Inter (Light-300-Highlight-Style) */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ============================================================
   Body-Baseline — Paper-10 Seiten-BG, Inter, Ink-900
   ============================================================ */
html {
  background: var(--paper-10);
  color: var(--ink-900);
  font-size: 16px;           /* 2026-05-28: Grundschriftgröße auf 16px/1rem festgelegt (Browser-Standard, rem-Math konsistent) */
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;           /* = 16px, alle rem-Werte beziehen sich darauf */
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Selection
   ============================================================ */
::selection {
  background: var(--accent-500);
  color: var(--ink-900);
}

/* ============================================================
   Fokus-Ring — Abschnitt 11
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   Link-Grundregel — Ink-900 mit Underline, Gold nur auf Hover
   ============================================================ */
a {
  color: inherit;
  text-decoration: none;
}
p a,
.prose a {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-micro) var(--motion-ease);
}
p a:hover,
.prose a:hover {
  color: var(--accent-700);
}
/* Buttons innerhalb prose/p NIE unterstreichen — Buttons sind keine Inline-Links */
p a.btn,
.prose a.btn,
a.btn,
a.btn:hover,
p a[class*="inline-flex"],
.prose a[class*="inline-flex"],
p a[class*="rounded-full"],
.prose a[class*="rounded-full"],
.cta-row a,
.cta-row a:hover {
  text-decoration: none;
}
/* Ausnahme: .btn--text bekommt Underline NUR auf hover */
.cta-row a.btn--text:hover,
.prose a.btn--text:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}