/* Auftragslotse – Design-Tokens. Thema „Waldgrün & Sonnengelb“: warmes Weiß, tiefes Grün, gelber Akzent. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Farben */
  --color-bg: oklch(98.6% 0.007 95);
  --color-surface: oklch(96% 0.018 140);
  --color-card: oklch(100% 0 0);
  --color-ink: oklch(23% 0.03 160);
  --color-muted: oklch(44% 0.022 160);
  --color-line: oklch(89% 0.014 140);
  --color-brand: oklch(40% 0.085 158);
  --color-brand-hover: oklch(34% 0.08 158);
  --color-deep: oklch(27% 0.055 160);
  --color-deep-2: oklch(33% 0.06 160);
  --color-on-deep: oklch(96% 0.012 120);
  --color-on-deep-muted: oklch(80% 0.03 140);
  --color-sun: oklch(87% 0.155 94);
  --color-sun-soft: oklch(94% 0.07 96);
  --color-urgent: oklch(52% 0.16 35);
  --color-error-bg: oklch(95% 0.03 35);
  --color-focus: oklch(55% 0.15 250);
  --shadow-card: 0 1px 2px oklch(23% 0.03 160 / 0.06), 0 12px 32px -12px oklch(23% 0.03 160 / 0.18);

  /* Schrift */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
  --text-2xl: clamp(1.8rem, 1.3rem + 2vw, 2.75rem);
  --text-3xl: clamp(2.3rem, 1.4rem + 3.6vw, 4.25rem);
  --text-huge: clamp(5.5rem, 3rem + 11vw, 12rem);
  --measure: 62ch;

  /* Abstände */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;
  --page-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --page-max: 72rem;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  --z-skip: 100;
  --z-nav: 50;
}