/* Kattenberg118 Studio — gedeelde theme tokens (light + auto dark)
 *
 * Pagina's includen dit als <link rel="stylesheet" href="/theme.css">
 * en gebruiken de variabelen via var(--token).
 *
 * Brand-accentkleuren (yellow/blue/red/...) blijven hetzelfde in beide
 * modi zodat shapes en accenten herkenbaar K118 voelen.
 */

@font-face {
  font-family: 'Fabriga';
  src: url('/fonts/Fabriga.woff2') format('woff2'), url('/fonts/Fabriga.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fabriga';
  src: url('/fonts/Fabriga-Medium.woff2') format('woff2'), url('/fonts/Fabriga-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fabriga';
  src: url('/fonts/Fabriga-Bold.woff2') format('woff2'), url('/fonts/Fabriga-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand-accenten — gelijk in light & dark */
  --blue:   #1798e8;
  --bluem:  #6fa8ff;
  --yellow: #ffe500;
  --pink:   #ffbeff;
  --red:    #fd6824;
  --green:  #93b4a1;

  /* Brand-vaste plum & cream voor contexten waar dark-mode niet geldt
     (PDF, mail, branding-elementen). Niet voor body/text. */
  --brand-plum:  #3d2d33;
  --brand-cream: #efe9dd;
  --brand-white: #fffff7;

  /* Semantische tokens — flippen in dark mode */
  --bg:           #efe9dd;
  --bg-alt:       #fffff7;
  --surface:      #fffff7;
  --surface-alt:  #efe9dd;
  --text:         #3d2d33;
  --text-strong:  #3d2d33;
  --text-muted:   rgba(61, 45, 51, 0.75);  /* AA-pass voor body op cream */
  --text-faint:   rgba(61, 45, 51, 0.55);  /* alleen voor large text (>18pt) */
  --border:       rgba(61, 45, 51, 0.18);
  --border-strong:rgba(61, 45, 51, 0.30);
  --shadow-card:  0 12px 36px rgba(61, 45, 51, 0.08), 0 0 0 1px rgba(61, 45, 51, 0.04);
  --logo-filter:  none;
  --shape-blend:  multiply;
  --shape-opacity: 1;

  /* Tabel-headers (donker bg + cream text) flippen NIET — donkere chip in
     beide modi voor consistente leesbaarheid. */
  --table-head-bg:   #3d2d33;
  --table-head-text: #fffff7;

  /* Knoppen / chips op surface */
  --chip-bg:         rgba(61,45,51,0.06);
  --chip-bg-hover:   rgba(61,45,51,0.12);

  /* Legacy aliassen — bestaande pages gebruiken deze namen.
     theme.css zorgt dat ze automatisch flippen in dark mode. */
  --white: var(--surface);
  --black: var(--text);
  --creme: var(--bg);

  /* Status / errors — donkerdere rood voor body-tekst (WCAG AA),
     felle --red blijft voor borders/icons. */
  --error:        #fd6824;        /* fel - voor borders/icons */
  --error-text:   #b32d00;        /* AA-pass voor tekst op cream/wit */
  --error-bg:     #ffe8e0;
  --link:         #0d6ba8;        /* AA-pass voor tekstlinks i.p.v. felle blauw */

  --color-scheme: light;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Warm-grijs palette (geïnspireerd op Claude Code): geen pure zwart,
       lichte plum-warmte zodat het bij brand-cream past zonder fel te zijn. */
    --bg:           #26242a;   /* page background — zachter dan pure zwart */
    --bg-alt:       #2c2a30;
    --surface:      #34323a;   /* cards, modals, topbar */
    --surface-alt:  #2a2830;   /* inputs op cards */
    --text:         #ece8e0;
    --text-strong:  #fffff7;
    --text-muted:   rgba(236, 232, 224, 0.78);  /* AA-pass op dark surface */
    --text-faint:   rgba(236, 232, 224, 0.55);  /* alleen large text */
    --border:       rgba(236, 232, 224, 0.12);
    --border-strong:rgba(236, 232, 224, 0.24);
    --shadow-card:  0 12px 36px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(236, 232, 224, 0.05);
    /* Het wordmark-logo is donker plum — niet meer via filter, maar via
       <picture media='(prefers-color-scheme: dark)'> dat het light asset serveert. */
    --logo-filter:  none;
    --shape-blend:  screen;
    --shape-opacity: 0.55;
    --error-bg:     #3d2a25;

    /* Tabel-headers blijven donker in dark mode, maar iets lichter dan surface
       zodat ze visueel als rij voelen. */
    --table-head-bg:   #1a181d;
    --table-head-text: #ece8e0;

    --chip-bg:         rgba(236,232,224,0.08);
    --chip-bg-hover:   rgba(236,232,224,0.16);

    --color-scheme: dark;
  }
}

/* Globale reset bovenop site-specifieke styles */
*, *::before, *::after { box-sizing: border-box; }

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

/* Logo-component — gebruik <img class="kb-logo"> overal */
.kb-logo {
  display: block;
  height: auto;
  filter: var(--logo-filter);
}

/* Globale focus-ring (WCAG 2.1 AA: 3:1 focus-indicator contrast) */
:where(button, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   MOBILE (≤720px) — globale fixes voor iPhone native werking
   Geen aparte "mobile views". Desktop layout adapteert.
   ────────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* iOS auto-zoom voorkomen op input focus */
  :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px !important;
  }

  /* Touch-friendly knoppen (Apple HIG ≥ 44×44px) */
  :where(button, .btn, .act-btn, a.btn-new, a.btn-logout):not(.icon-btn):not(.btn-tab) {
    min-height: 44px;
    padding-block: 10px;
  }

  /* Editor split-view → gestapeld (sidebar boven, preview onder) */
  .workspace,
  .layout,
  main.workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .workspace > .editor,
  .layout > aside,
  .layout > .editor-sidebar {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    max-height: 50vh;
  }

  /* A4 PDF preview: scale-fit zodat hij in viewport past */
  .preview .a4,
  .preview-page,
  .doc-preview-page {
    transform: scale(0.45);
    transform-origin: top left;
  }
  .preview, .preview-wrap { overflow: auto; }

  /* Modals full-screen op mobile */
  .modal-overlay .modal,
  .modal:not(.modal-inline) {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Floating action buttons respecteren home-indicator */
  .fab,
  [class*="floating"]:not(.floating-label) {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* Topbar veilige padding voor iPhone notch */
  .topbar, .site-header, header.topbar {
    padding-top: env(safe-area-inset-top) !important;
  }

  /* Tabellen: horizontal scroll ipv afkappen */
  .table-card, .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-card table, .table-wrap table {
    min-width: 540px;
  }

  /* Project drawer / side panels: full-screen op mobile */
  #project-detail > div,
  .drawer-panel,
  [class*="-drawer"] > div:first-child {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

/* iPhone notch compensatie ook op desktop met cover viewport */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: env(safe-area-inset-top); }
}