/*
 * Backstage design-tokens — bron: docs/specs/02-ux-ui.md + de goedgekeurde
 * UI-richting "Synthese" (BESLISSINGEN 16.3, docs/design/ui-varianten/).
 * Wijzigingen aan tokens lopen via het design system, nooit per scherm.
 */

/* Work Sans, self-hosted (SIL OFL) — variabele font, latin-subset (8.1, 11.2) */
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/worksans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/worksans-var-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@import "tailwindcss";

/* Component-CSS (alleen waar utilities niet volstaan — zie CONVENTIES.md).
   print.css staat bewust als laatste: print-regels overrulen utilities. */
@import "./components/avatar.css";
@import "./components/button.css";
@import "./components/tooltip.css";
@import "./components/form.css";
@import "./components/overlay.css";
@import "./components/motion.css";
@import "./components/sortable.css";
@import "./components/skeleton.css";
@import "./components/turbo_progress.css";
@import "./components/widget.css";
@import "./components/hero.css";
@import "./components/lightbox.css";
@import "./components/org_chart.css";
@import "./components/editor_chrome.css";
@import "./components/page_editor.css";
@import "./components/rich_text.css";
@import "./components/drive_link.css";
@import "./components/parallax.css";
@import "./components/confetti.css";
/* mobile.css: app-brede telefoon-only aanpassingen (mobile UX-audit). Ná de
   overige componenten zodat het op < 640px van hun utilities/regels wint;
   print.css blijft daarna als allerlaatste. */
@import "./components/mobile.css";
@import "./components/print.css";

@theme {
  /* Brandkleuren (11.1) */
  --color-brand: #ff6d00; /* Young Orange — CTA's, links, accenten, badges */
  --color-offwhite: #eee6dd; /* Kinda White — lichte vlakken en knoppen */
  --color-black: #161616; /* Almost Black — donkere vlakken; standaard tekstkleur */

  /* Neutralen (invulling bij 11.5) */
  --color-paper: #f7f3ee; /* app-achtergrond: lichte tint van Kinda White */
  --color-line: #e3dcd3; /* randen, hairlines */
  --color-subtle: #5c5854; /* secundaire tekst */

  /* Functioneel palet — alleen feedback-componenten (8.7) */
  --color-success: #15803d;
  --color-success-tint: #eaf5ee;
  --color-warning: #b45309;
  --color-warning-tint: #fbf2e5;
  --color-error: #b91c1c;
  --color-error-tint: #fbecec;
  --color-info: #1d4ed8;
  --color-info-tint: #eaf0fc;

  /* Typografie (11.2, 11.11) */
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;

  /* Vormen (11.4) */
  --radius-md: 8px; /* invoervelden, kleine kaarten */
  --radius-lg: 12px; /* kaarten, modals, panelen */

  /* Vlakken & diepte (11.5; verfijnd in 16.3: grote blur, lage opacity) */
  --shadow-card: 0 1px 2px rgb(22 22 22 / 0.04), 0 6px 20px rgb(22 22 22 / 0.06);
  --shadow-card-hover: 0 2px 4px rgb(22 22 22 / 0.05), 0 10px 28px rgb(22 22 22 / 0.09);
  --shadow-raised: 0 12px 40px rgb(22 22 22 / 0.16); /* panelen, dropdowns, modals — ligt hoger */

  /* Motion (11.12): subtiel en functioneel */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Contentbreedtes (DSC-006): één gedeeld content-frame plus een smallere
     leeskolom. Als tokens zodat elk oppervlak dezelfde breedte deelt en de
     footer/hero's niet opnieuw kunnen afdrijven. In Tailwind v4 genereert de
     --container-*-namespace de max-w-frame / max-w-read utilities. */
  --container-frame: 1200px; /* gedeeld content-frame: overzichten, directory, pagina's, hero's, footer, admin */
  --container-read: 720px; /* leeskolom voor lopende tekst/posts: feed, profiel, composer, thread */
}

@layer base {
  :root {
    color-scheme: light; /* licht thema only (8.2) */
  }

  body {
    @apply bg-paper text-black font-sans antialiased;
    font-size: 16px;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.2;
  }

  /* Interactief = hand-cursor (Tailwind v4 zet cursor:default op buttons; wij
     draaien dat app-breed terug). Disabled toont bewust geen hand. */
  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  input[type="submit"]:not(:disabled),
  input[type="button"]:not(:disabled),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  select:not(:disabled),
  summary,
  label[for] {
    cursor: pointer;
  }
  button:disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }

  /* Zichtbare focus-ring: 2px Almost Black met 2px offset (8.7).
     Op donkere/oranje vlakken schakelt .on-dark naar Kinda White. */
  :focus-visible {
    outline: 2px solid var(--color-black);
    outline-offset: 2px;
  }
  .on-dark :focus-visible,
  .on-dark:focus-visible {
    outline-color: var(--color-offwhite);
  }

  ::selection {
    background: var(--color-brand);
    color: var(--color-black);
  }

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

@utility display-caps {
  /* Display-koppen: Work Sans Black, all-caps, lichte letter-spacing (11.2) */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@utility tnum {
  /* Tabulaire cijfers voor tellers en percentages (16.3) */
  font-variant-numeric: tabular-nums;
}

/* UX-ronde juli 2026 (Lennart #2): in de page-editor is de widget-INHOUD inert.
   Links, knoppen (ook Stimulus-gedreven: video-facade, accordion, kopieer-knop)
   en formulieren binnen een widget vuren niet; de klik valt door naar het frame
   dat het widget selecteert i.p.v. weg te navigeren of een actie te triggeren.
   Werkt ook in de readonly/meekijk-editor (puur CSS, niet aan selectWidget
   gekoppeld). De zwevende toolbar en de resize-handvatten staan buiten
   data-widget-editor-content en blijven interactief. */
[data-test-id="editor-canvas"] [data-widget-editor-content] :is(a, button, [role="button"], form, input, select, textarea, label, summary) {
  pointer-events: none;
}