/* ==========================================================================
   base.css – Wärme mit System
   Token aliases, base typography, links, layout rhythm.

   The source of truth for colours, radii, fonts and heading typography is the
   Global Styles admin screen (--gs-* custom properties). This file only maps
   those to the shorter --ws-* names used throughout the child theme, and
   refines what Global Styles does not cover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token aliases
   -------------------------------------------------------------------------- */

:root {
  /* Brand gradient stops */
  --ws-indigo: var(--gs-color-indigo, #2f3db8);
  --ws-red:    var(--gs-color-red,    #d63a2f);
  --ws-amber:  var(--gs-color-amber,  #e8892e);

  /* Neutrals */
  --ws-ink:    var(--gs-color-ink,    #0e1731);
  --ws-navy:   var(--gs-color-navy,   #0b1530);
  --ws-body:   var(--gs-color-body,   #3e465c);
  --ws-muted:  var(--gs-color-muted,  #5c6478);
  --ws-line:   var(--gs-color-line,   #e3e0d8);
  --ws-stone:  var(--gs-color-stone,  #f3f1ec);
  --ws-white:  var(--gs-color-white,  #fff);

  /* Functional */
  --ws-link:   var(--ws-indigo);
  --ws-focus:  var(--ws-amber);
  --ws-check:  var(--gs-color-check,  #ffe58a);

  /* Radii */
  --ws-radius-pill:  var(--gs-radius-pill,  999px);
  --ws-radius-image: var(--gs-radius-image, 6px);
  --ws-radius-panel: var(--gs-radius-panel, 14px);

  /* The gradient is composed here because it is the one token made of three
     others. Used in exactly four places (PROJECT_PLAN §5.1.3): logo,
     Wärmelinie, primary button ring, favicon. */
  --ws-gradient: linear-gradient(
    105deg,
    var(--ws-indigo),
    var(--ws-red) 58%,
    var(--ws-amber)
  );

  /* Spacing scale (8px based, PROJECT_PLAN §5.4) */
  --ws-space-1: 4px;
  --ws-space-2: 8px;
  --ws-space-3: 12px;
  --ws-space-4: 16px;
  --ws-space-5: 24px;
  --ws-space-6: 32px;
  --ws-space-7: 48px;
  --ws-space-8: 64px;
  --ws-space-9: 96px;
  --ws-space-10: 128px;

  --ws-section-y: clamp(64px, 8vw, 128px);

  /* Font stacks. Families are declared by the Global Styles plugin as
     @font-face; these stacks add the fallbacks. */
  --ws-font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ws-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base typography
   Flatsome's own font loading is switched off (Customizer → disable fonts),
   so the base families are set here. Sizes/weights for h1–h6, p, .lead and
   .readout come from Global Styles and are deliberately not repeated.
   -------------------------------------------------------------------------- */

body {
  font-family: var(--ws-font-body);
  color: var(--ws-body);
  background: var(--ws-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.heading-font,
blockquote {
  font-family: var(--ws-font-display);
  color: var(--ws-ink);
}

button,
input,
select,
textarea,
.button {
  font-family: var(--ws-font-body);
}

/* Line length. 68ch keeps paragraphs readable (PROJECT_PLAN §5.3). Applies to
   prose inside a column, not to layout containers. */
.col-inner > p,
.col-inner > ul,
.col-inner > ol {
  max-width: 68ch;
}

strong, b { font-weight: 700; }

/* Utility for lists that are navigation or data rather than prose. Flatsome
   forces `li { margin-left: 1.3em !important }` inside columns. */
.ws-list-plain {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.ws-list-plain > li { margin-left: 0 !important; }

/* Italic is reserved for the brand phrase "mit System", which quotes the logo
   (PROJECT_PLAN §5.1.5). */
.ws-mit-system {
  font-family: var(--ws-font-display);
  font-style: italic;
  font-weight: 600;
}

/* Captions and source notes. */
.ws-caption,
figcaption {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ws-muted);
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */

a {
  color: var(--ws-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease;
}

a:hover { color: var(--ws-ink); }

/* Body copy links are underlined; navigation, buttons and cards are not. */
.col-inner p > a,
.ws-prose a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Focus
   One visible focus style everywhere (QA §11 "focus is always visible").
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--ws-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   5. Section rhythm and backgrounds
   White → stone → white, with at most one navy section per page
   (PROJECT_PLAN §5.4).
   -------------------------------------------------------------------------- */

.ws-section-stone { background-color: var(--ws-stone); }
.ws-section-navy  { background-color: var(--ws-navy); }

.ws-section-navy,
.ws-section-navy p,
.ws-section-navy li {
  color: rgba(255, 255, 255, 0.86);
}

.ws-section-navy h1,
.ws-section-navy h2,
.ws-section-navy h3,
.ws-section-navy h4 {
  color: #fff;
}

.ws-section-navy a { color: #fff; }

/* Vertical rhythm helpers usable from UX Builder → Advanced → Class. */
.ws-pad    { padding-top: var(--ws-section-y); padding-bottom: var(--ws-section-y); }
.ws-tight  { padding-top: var(--ws-space-7); padding-bottom: var(--ws-space-7); }

/* Hairline rule used between the "three questions" rows and table rows. */
.ws-rule { border-top: 1px solid var(--ws-line); }

/* --------------------------------------------------------------------------
   6. Images
   6px radius, no borders, no drop shadows (PROJECT_PLAN §5.7).
   -------------------------------------------------------------------------- */

.ws-img img,
.col-inner img:not(.ws-no-radius) {
  border-radius: var(--ws-radius-image);
}

/* --------------------------------------------------------------------------
   7. [PRÜFEN] marks
   Normal for visitors, highlighted for logged-in users (PROJECT_PLAN §5.9).
   -------------------------------------------------------------------------- */

.ws-check { background: none; }

body.logged-in .ws-check {
  background: var(--ws-check);
  box-shadow: 0 0 0 2px var(--ws-check);
  cursor: help;
}

/* --------------------------------------------------------------------------
   8. Motion baseline
   Content must be visible if JS fails, so nothing is hidden by CSS
   (PROJECT_PLAN §6.1). This only neutralises transitions when the user has
   asked for reduced motion.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}