/*
 * Toolufo design tokens — the single source for colour, radius, spacing,
 * type, shadow, focus and touch sizes. Loaded first in app/layout.tsx; every
 * other stylesheet's own variables point here, so a brand change is one edit.
 *
 * Brand: black/ink + white + Toolufo orange as CTA/active/selection colour,
 * with one cool technical accent for data details. No new hues elsewhere.
 */
:root {
  /* Brand colours */
  --ufo-orange: #ff850a;
  --ufo-orange-hover: #ff9a2c;
  --ufo-orange-soft: #fff1dd;
  --ufo-orange-ink: #a74c00; /* orange dark enough for text on white (WCAG AA) */
  --ufo-ink: #17191e;
  --ufo-ink-soft: #25282d;
  --ufo-accent: #15485a; /* technical accent (specs, meta, icons) */
  --ufo-accent-soft: #e6f1f4;

  /* Surfaces and text */
  --ufo-page: #f4f3f0;
  --ufo-surface: #ffffff;
  --ufo-surface-soft: #f5f6f7;
  --ufo-text: var(--ufo-ink);
  --ufo-text-muted: #58666d;
  --ufo-border: #cbd1d4;
  --ufo-border-soft: #dddedb;

  /* States */
  --ufo-focus: #ff8a00;
  --ufo-hover-surface: #f7f8f8;
  --ufo-active: var(--ufo-orange);
  --ufo-disabled-opacity: 0.55;
  --ufo-danger: #b3261e;
  --ufo-danger-soft: #fff5f4;
  --ufo-success: #286441;
  --ufo-success-soft: #eef6f0;

  /* Radius */
  --ufo-radius-sm: 6px;
  --ufo-radius-control: 9px;
  --ufo-radius-md: 10px;
  --ufo-radius-lg: 12px;
  --ufo-radius-pill: 999px;

  /* Spacing (4px grid) */
  --ufo-space-1: 4px;
  --ufo-space-2: 8px;
  --ufo-space-3: 12px;
  --ufo-space-4: 16px;
  --ufo-space-5: 20px;
  --ufo-space-6: 24px;
  --ufo-space-8: 32px;

  /* Type */
  --ufo-font-xs: 12px;
  --ufo-font-sm: 13px;
  --ufo-font-base: 14px;
  --ufo-font-md: 16px;
  --ufo-font-lg: 18px;
  --ufo-font-xl: 22px;
  --ufo-weight-regular: 400;
  --ufo-weight-medium: 500;
  --ufo-weight-semibold: 600;
  --ufo-weight-bold: 700;

  /* Elevation */
  --ufo-shadow-sm: 0 2px 7px #193b4b08;
  --ufo-shadow-md: 0 6px 18px #193b4b14;
  /* Schaduw omhoog, voor een sticky actiebalk onderaan het scherm. */
  --ufo-shadow-up: 0 -6px 18px #193b4b14;
  /* Lichtstreep van een skeleton tijdens het laden. */
  --ufo-shimmer: #ffffffb3;

  /* Interaction sizes */
  --ufo-touch: 44px;
  --ufo-touch-compact: 40px;

  /*
   * Desktop-raamwerk (17 sep 2026, app/desktop-layout.css). Eén containermaat
   * en één zijmarge per breekpunt voor kop, subnav, inhoud en footer; de
   * leesbreedte begrenst intro's en meldingen. Onder 768 px gebruikt niets
   * deze tokens: telefoons houden hun eigen 14 px-marge en volle breedte.
   */
  --ufo-container: 1280px;
  --ufo-gutter: 14px;
  --ufo-measure: 72ch;
  --ufo-shell-header: 64px; /* hoogte van de desktopkop (één donkere balk) */
  --ufo-shell-subnav: 44px; /* hoogte van de lichte sectiebalk eronder */
  --ufo-orange-deep: #e67200; /* hover op een oranje knop met een muis */
  --ufo-text-h1-desktop: 30px;
  --ufo-text-h2-desktop: 22px;
  --ufo-text-eyebrow-desktop: 11px;

  /*
   * Beweging (app/motion.css). Drie duren, meer niet: een tik, een kleine
   * toestandswissel en één accent dat je mag zien. De easings zijn mild —
   * de spring veert nauwelijks door, zodat niets speelgoedachtig wordt.
   * De scanlijn leent bestaande merkkleuren; geen nieuwe tinten.
   */
  --ufo-motion-tap: 140ms;
  --ufo-motion-small: 200ms;
  --ufo-motion-accent: 380ms;
  --ufo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ufo-ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ufo-scan-line: var(--ufo-orange);
  --ufo-scan-corner: var(--ufo-accent);
  --ufo-scan-duration: 450ms;
}

/* Zijmarge per breekpunt: 24 px op tablets, 32 px vanaf 1280, 40 px vanaf 1440. */
@media (min-width: 768px) {
  :root {
    --ufo-gutter: 24px;
  }
}
@media (min-width: 1280px) {
  :root {
    --ufo-gutter: 32px;
  }
}
@media (min-width: 1440px) {
  :root {
    --ufo-gutter: 40px;
  }
}