/* ============================================================
   Leadray — Design Tokens (Colors & Type)
   Saturn5 Webworkflow — globale Ebene (Child-Theme)
   Pfad: /wp-content/themes/[child-theme]/css/leadray-tokens.css
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_18pt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter_18pt-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Neutral scale */
  --ink:        #000000;
  --ink-90:     #111111;
  --ink-70:     #2a2a2a;
  --ink-50:     #5c5c5c;
  --ink-30:     #8a8a8a;
  --line:       #e5e5e5;
  --line-soft:  #ececec;
  --canvas:     #f7f7f7;
  --paper:      #ffffff;

  /* Signal — einziger Akzent */
  --signal:     #c8102e;
  --signal-bg:  #fdecee;
  --focus:      #000000;

  /* Semantische Aliases */
  --fg-1: var(--ink);
  --fg-2: var(--ink-70);
  --fg-3: var(--ink-50);
  --fg-4: var(--ink-30);
  --bg-1: var(--paper);
  --bg-2: var(--canvas);
  --bd-1: var(--line);
  --bd-2: var(--ink);

  /* Typografie */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Font Sizes */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-32: 32px; --fs-40: 40px; --fs-56: 56px; --fs-72: 72px;

  /* Line Heights */
  --lh-tight: 1.08; --lh-snug: 1.2; --lh-body: 1.5; --lh-loose: 1.65;

  /* Letter Spacing */
  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-mono:    0.02em;

  /* Spacing (4px base) */
  --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 */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px;

  /* Elevation */
  --sh-0: none;
  --sh-1: 0 1px 0 rgba(0,0,0,0.04);
  --sh-2: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --sh-3: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis:  cubic-bezier(0.3, 0, 0, 1);
  --d-fast: 120ms; --d-base: 180ms; --d-slow: 280ms;
}

/* Element defaults */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
* { box-sizing: border-box; }

h1 { font: 600 var(--fs-40)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tr-snug); margin: 0; }
h2 { font: 600 var(--fs-32)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tr-snug); margin: 0; }
h3 { font: 600 var(--fs-24)/var(--lh-snug) var(--font-sans); margin: 0; }
h4 { font: 600 var(--fs-20)/var(--lh-snug) var(--font-sans); margin: 0; }
h5 { font: 600 var(--fs-16)/var(--lh-snug) var(--font-sans); margin: 0; }
h6 { font: 600 var(--fs-14)/var(--lh-snug) var(--font-sans); margin: 0; }
p  { font: 400 var(--fs-15)/var(--lh-body) var(--font-sans); color: var(--fg-1); margin: 0; }
small { font-size: var(--fs-12); color: var(--fg-3); }
hr  { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
::selection { background: var(--ink); color: var(--paper); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}