/**
 * SBS Design Tokens
 *
 * Ported from sbs-ui (app/globals.css). This file is the single source of
 * truth for colour, type and spacing. theme.json mirrors a subset of these
 * values so the block editor offers the same palette to content staff.
 *
 * If you change a value here, mirror it in theme.json.
 */

:root {
  /* ---------------------------------------------------------------
   * Brand
   * The SBS gold from the logo. --sbs-primary in sbs-ui.
   * ------------------------------------------------------------- */
  --sbs-gold: rgb(199 163 109);
  --sbs-gold-rgb: 199 163 109;
  --sbs-gold-light: rgb(216 190 151);
  --sbs-gold-dark: rgb(163 130 80);
  --sbs-gold-subtle: rgb(245 238 227);

  /* ---------------------------------------------------------------
   * Neutrals — carried over verbatim from the sbs-ui oklch scale
   * ------------------------------------------------------------- */
  --sbs-background: oklch(1 0 0);
  --sbs-foreground: oklch(0.145 0 0);
  --sbs-card: oklch(1 0 0);
  --sbs-card-foreground: oklch(0.145 0 0);
  --sbs-muted: oklch(0.97 0 0);
  --sbs-muted-foreground: oklch(0.556 0 0);
  --sbs-accent: oklch(0.97 0 0);
  --sbs-accent-foreground: oklch(0.205 0 0);
  --sbs-border: oklch(0.922 0 0);
  --sbs-input: oklch(0.922 0 0);
  --sbs-ring: var(--sbs-gold);
  --sbs-destructive: oklch(0.577 0.245 27.325);

  /* Inverted surface, used for the footer and dark sections */
  --sbs-inverse: oklch(0.205 0 0);
  --sbs-inverse-foreground: oklch(0.985 0 0);
  --sbs-inverse-muted: oklch(0.708 0 0);

  /* ---------------------------------------------------------------
   * Typography
   * Jost for display/headings, Raleway for body.
   * Both are OFL-licensed and self-hosted (see base.css).
   * ------------------------------------------------------------- */
  --sbs-font-display: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --sbs-font-body: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale — min at 360px viewport, max at 1280px */
  --sbs-text-xs: 0.75rem;
  --sbs-text-sm: 0.875rem;
  --sbs-text-base: 1rem;
  --sbs-text-lg: clamp(1.075rem, 1.02rem + 0.28vw, 1.25rem);
  --sbs-text-xl: clamp(1.2rem, 1.11rem + 0.43vw, 1.5rem);
  --sbs-text-2xl: clamp(1.45rem, 1.28rem + 0.76vw, 1.95rem);
  --sbs-text-3xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem);
  --sbs-text-4xl: clamp(2.1rem, 1.6rem + 2.2vw, 3.5rem);
  --sbs-text-5xl: clamp(2.5rem, 1.7rem + 3.5vw, 4.5rem);

  --sbs-leading-tight: 1.15;
  --sbs-leading-snug: 1.35;
  --sbs-leading-normal: 1.65;

  --sbs-tracking-tight: -0.02em;
  --sbs-tracking-normal: 0;
  --sbs-tracking-wide: 0.08em;
  /* The logo tagline "empfangen ausrüsten weitergeben" is very widely spaced */
  --sbs-tracking-widest: 0.28em;

  --sbs-weight-normal: 400;
  --sbs-weight-medium: 500;
  --sbs-weight-bold: 700;
  /* Jost's variable range tops out at 700; asking for 800 would let the
   * browser synthesise a faux-bold instead. */
  --sbs-weight-display: 700;

  /* ---------------------------------------------------------------
   * Spacing — 0.25rem base, matching the Tailwind scale sbs-ui uses
   * ------------------------------------------------------------- */
  --sbs-space-1: 0.25rem;
  --sbs-space-2: 0.5rem;
  --sbs-space-3: 0.75rem;
  --sbs-space-4: 1rem;
  --sbs-space-5: 1.25rem;
  --sbs-space-6: 1.5rem;
  --sbs-space-8: 2rem;
  --sbs-space-10: 2.5rem;
  --sbs-space-12: 3rem;
  --sbs-space-16: 4rem;
  --sbs-space-20: 5rem;
  --sbs-space-24: 6rem;
  --sbs-space-32: 8rem;

  /* Vertical rhythm between page sections, tighter on mobile */
  --sbs-section-y: clamp(3rem, 1.8rem + 5vw, 6rem);

  /* ---------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------- */
  --sbs-container: 1200px;
  --sbs-container-narrow: 760px;
  --sbs-container-wide: 1440px;
  --sbs-gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

  /* ---------------------------------------------------------------
   * Radius — 0.625rem base, from sbs-ui --radius
   * ------------------------------------------------------------- */
  --sbs-radius: 0.625rem;
  --sbs-radius-sm: calc(var(--sbs-radius) - 4px);
  --sbs-radius-md: calc(var(--sbs-radius) - 2px);
  --sbs-radius-lg: var(--sbs-radius);
  --sbs-radius-xl: calc(var(--sbs-radius) + 4px);
  --sbs-radius-full: 9999px;

  /* ---------------------------------------------------------------
   * Elevation & motion
   * ------------------------------------------------------------- */
  --sbs-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --sbs-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --sbs-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --sbs-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --sbs-shadow-gold: 0 8px 24px -6px rgb(var(--sbs-gold-rgb) / 0.35);

  --sbs-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --sbs-transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Sticky header height, referenced by scroll-padding and the hero */
  --sbs-header-h: 5rem;

  --sbs-z-header: 50;
  --sbs-z-menu: 60;
}