/*
 * GOsensit Design System — colors, type, spacing, semantics
 * =========================================================
 * Extends `design-tokens-original.css` with:
 *  - Webfont-based type stack (Inter + JetBrains Mono via Google Fonts)
 *  - Spacing / radius / shadow / motion scales
 *  - Semantic component helpers (.h1, .body, .btn-primary, .card, …)
 *
 * ┌─ Voor adoptie op een nieuwe app: ─────────────────────────────┐
 * │ 1. Lees DESIGN-SYSTEM.md prose VÓÓR deze CSS                  │
 * │ 2. Inventariseer alle tokens + helpers — docs/REFERENCE.md    │
 * │ 3. Volg het playbook — docs/ADOPT.md                          │
 * │ 4. Run de audit-gates — docs/COMPLIANCE-CHECKLIST.md          │
 * └───────────────────────────────────────────────────────────────┘
 *
 * ⚠️ Helper-classes volgen een BEM-pattern. .btn / .badge / .card zijn
 *    base-classes die ALLEEN werken samen met een variant. Variant-alone
 *    (<button class="btn-primary">) mist flex/padding/font-size. Zie
 *    DESIGN-SYSTEM.md sectie "Helper-class usage (BEM-style)".
 *
 * Source-of-truth for colors: GOsensit-AI-Defaults/branding/design-tokens.css
 * Last updated: 2026-05-21
 */

/* ===================================================================
 * Webfonts — Inter (heading + body) + JetBrains Mono (code)
 *  ✅ One UI font for everything: **Inter** at weight 600/700 for
 *     headings and 400/500 for body. Same approach as Linear, Vercel,
 *     Stripe — most coherent, nothing to maintain.
 *  ✅ The GOsensit wordmark is set in **Serpentine Sans ICG** (Dick
 *     Jensen, 1972 — licensed via Linotype, self-hosted). Reserved
 *     for the wordmark only; do NOT use it for headings.
 *  - Barlow Semi Condensed stays as a graceful fallback for the
 *    `--gosensit-font-logo` stack.
 *  - Code: JetBrains Mono.
 * =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Brand logo face — Serpentine Sans ICG (licensed, self-hosted).
 * Reserved for logo / wordmark contexts only — NOT used as the
 * default display/heading face. See `.logo-text` helper below. */
@font-face {
  font-family: 'Serpentine Sans';
  src: url('fonts/SerpentineSansICG-Regular.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Primary Colors ===== */
  --gosensit-orange: #F39200;
  --gosensit-orange-light: #F5A623;
  --gosensit-orange-bg: rgba(243, 146, 0, 0.8);
  --gosensit-orange-tint: rgba(243, 146, 0, 0.10);
  --gosensit-orange-focus: rgba(243, 146, 0, 0.40);

  /* ===== Neutral Colors ===== */
  --gosensit-anthracite: #3D3D3D;
  --gosensit-dark-grey: #4D4D4D;
  --gosensit-grey: #757575;
  --gosensit-grey-light: #A0A0A0;
  --gosensit-light-grey: #F5F5F5;
  --gosensit-light-grey-2: #FAFAFA;
  --gosensit-border: #E0E0E0;
  --gosensit-border-soft: #EDEDED;
  --gosensit-white: #FFFFFF;

  /* ===== Status Colors (derived; harmonised with brand) ===== */
  --gosensit-success: #2E7D32;
  --gosensit-success-bg: #E8F5E9;
  --gosensit-warning: #ED6C02;
  --gosensit-warning-bg: #FFF4E5;
  --gosensit-danger: #C62828;
  --gosensit-danger-bg: #FDECEA;
  --gosensit-info: #0277BD;
  --gosensit-info-bg: #E3F2FD;

  /* ===== Semantic Tokens (Light Mode) =====
   * surface-hover and input-bg are first-class semantic tokens — apps
   * that need a hover-feedback color for icon-only buttons or a sunken
   * background for form inputs MUST use these tokens, not Tailwind
   * `hover:bg-white/10` utilities (mode-agnostic) or palette tokens
   * (`--gosensit-light-grey` is not theme-aware).  Both pass the 25pt
   * channel-sum contrast gate against surface-shell — see Step 7 of
   * docs/COMPLIANCE-CHECKLIST.md (`scripts/audit-contrast.py`).
   */
  --gosensit-heading: var(--gosensit-anthracite);
  --gosensit-body: var(--gosensit-dark-grey);
  --gosensit-body-secondary: var(--gosensit-grey);
  --gosensit-link: var(--gosensit-orange);
  --gosensit-accent: var(--gosensit-orange);
  --gosensit-surface: var(--gosensit-white);
  --gosensit-surface-alt: var(--gosensit-light-grey);
  --gosensit-surface-shell: var(--gosensit-light-grey);
  --gosensit-surface-hover: #EBEBEB;  /* hover-feedback on surface/shell — ≥25pt below shell */
  --gosensit-input-bg: var(--gosensit-white);  /* sunken vs surface only in dark; same as surface in light */
  --gosensit-border-color: var(--gosensit-border);

  /* ===== Typography — families =====
   * Logo only:       Serpentine Sans (use `.logo-text` or `var(--gosensit-font-logo)`)
   * Display/heading: Inter (one font for everything — coherent, low-maintenance)
   * Body / UI:       Inter
   * Code:            JetBrains Mono
   */
  --gosensit-font-logo:    'Serpentine Sans', 'Barlow Semi Condensed', system-ui, sans-serif;
  --gosensit-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gosensit-font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gosensit-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gosensit-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ===== Typography — scale ===== */
  --gosensit-text-display: 56px; /* hero/cover */
  --gosensit-text-h1: 36px;
  --gosensit-text-h2: 28px;
  --gosensit-text-h3: 22px;
  --gosensit-text-h4: 18px;
  --gosensit-text-body: 15px;
  --gosensit-text-small: 13px;
  --gosensit-text-caption: 12px;
  --gosensit-text-overline: 11px;

  /* ===== Typography — line height ===== */
  --gosensit-lh-tight: 1.15;
  --gosensit-lh-snug: 1.3;
  --gosensit-lh-normal: 1.5;
  --gosensit-lh-loose: 1.7;

  /* ===== Spacing (4px base) ===== */
  --gosensit-space-0: 0;
  --gosensit-space-1: 4px;
  --gosensit-space-2: 8px;
  --gosensit-space-3: 12px;
  --gosensit-space-4: 16px;
  --gosensit-space-5: 24px;
  --gosensit-space-6: 32px;
  --gosensit-space-7: 48px;
  --gosensit-space-8: 64px;
  --gosensit-space-9: 96px;

  /* ===== Radii ===== */
  --gosensit-radius-xs: 2px;
  --gosensit-radius-sm: 4px;
  --gosensit-radius:    8px;
  --gosensit-radius-lg: 12px;
  --gosensit-radius-xl: 16px;
  --gosensit-radius-pill: 999px;

  /* ===== Shadows ===== */
  --gosensit-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --gosensit-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --gosensit-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
  --gosensit-shadow-focus: 0 0 0 2px var(--gosensit-orange-focus);

  /* ===== Motion ===== */
  --gosensit-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gosensit-dur-fast: 120ms;
  --gosensit-dur-base: 200ms;
  --gosensit-dur-slow: 300ms;
}

/* ===== Dark Mode ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --gosensit-heading: #FFFFFF;
    --gosensit-body: #FFFFFF;
    --gosensit-body-secondary: #B0B0B0;
    --gosensit-surface: #3D3D3D;
    --gosensit-surface-alt: #4D4D4D;
    --gosensit-surface-shell: #2A2A2A;
    --gosensit-surface-hover: #4D4D4D;  /* ≥25pt above both shell and surface */
    --gosensit-input-bg: #232323;        /* sunken below surface — ≥25pt darker */
    --gosensit-border-color: #555555;
    --gosensit-link: #F39200;
    --gosensit-accent: #F39200;
  }
}

/* ===================================================================
 * Base
 * =================================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-body);
  line-height: var(--gosensit-lh-normal);
  color: var(--gosensit-body);
  background: var(--gosensit-surface);
  margin: 0;
}

/* ===================================================================
 * Type — semantic helpers
 * =================================================================== */
.display, h1.display {
  font-family: var(--gosensit-font-display);
  font-size: var(--gosensit-text-display);
  font-weight: 800;
  line-height: var(--gosensit-lh-tight);
  letter-spacing: -0.02em;
  color: var(--gosensit-heading);
  margin: 0;
}
.h1, h1 {
  font-family: var(--gosensit-font-heading);
  font-size: var(--gosensit-text-h1);
  font-weight: 700;
  line-height: var(--gosensit-lh-tight);
  letter-spacing: -0.01em;
  color: var(--gosensit-heading);
  margin: 0;
}
.h2, h2 {
  font-family: var(--gosensit-font-heading);
  font-size: var(--gosensit-text-h2);
  font-weight: 700;
  line-height: var(--gosensit-lh-snug);
  color: var(--gosensit-heading);
  margin: 0;
}
.h3, h3 {
  font-family: var(--gosensit-font-heading);
  font-size: var(--gosensit-text-h3);
  font-weight: 600;
  line-height: var(--gosensit-lh-snug);
  color: var(--gosensit-heading);
  margin: 0;
}
.h4, h4 {
  font-family: var(--gosensit-font-heading);
  font-size: var(--gosensit-text-h4);
  font-weight: 600;
  line-height: var(--gosensit-lh-snug);
  color: var(--gosensit-heading);
  margin: 0;
}
.body, p {
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-body);
  line-height: var(--gosensit-lh-normal);
  color: var(--gosensit-body);
  margin: 0;
}
.caption {
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-caption);
  line-height: var(--gosensit-lh-snug);
  color: var(--gosensit-body-secondary);
}
.overline {
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gosensit-body-secondary);
}
.code, code {
  font-family: var(--gosensit-font-mono);
  font-size: 0.92em;
  background: var(--gosensit-light-grey);
  padding: 2px 6px;
  border-radius: var(--gosensit-radius-sm);
  color: var(--gosensit-anthracite);
}
a, .link {
  color: var(--gosensit-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--gosensit-dur-fast) var(--gosensit-ease);
}
a:hover, .link:hover { border-bottom-color: var(--gosensit-link); }

/* Logo helper — only for reproducing the GOsensit wordmark in HTML.
   NEVER use this for headings or UI labels. Use <h1>/<h2>/etc instead. */
.logo-text {
  font-family: var(--gosensit-font-logo);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ===================================================================
 * Components — buttons
 * =================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-body);
  font-weight: 600;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--gosensit-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--gosensit-dur-fast) var(--gosensit-ease),
              border-color var(--gosensit-dur-fast) var(--gosensit-ease),
              transform var(--gosensit-dur-fast) var(--gosensit-ease);
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--gosensit-shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: var(--gosensit-orange);
  color: var(--gosensit-white);
}
.btn-primary:hover:not(:disabled) { background: var(--gosensit-orange-light); }

.btn-secondary {
  background: var(--gosensit-surface);
  color: var(--gosensit-heading);
  border-color: var(--gosensit-border-color);
}
.btn-secondary:hover:not(:disabled) { background: var(--gosensit-surface-hover); }

.btn-ghost {
  background: transparent;
  color: var(--gosensit-heading);
}
.btn-ghost:hover:not(:disabled) { background: var(--gosensit-surface-hover); }

.btn-danger {
  background: var(--gosensit-danger);
  color: var(--gosensit-white);
}
.btn-sm { padding: 6px 12px; font-size: var(--gosensit-text-small); border-radius: var(--gosensit-radius-sm); }
.btn-lg { padding: 14px 22px; font-size: var(--gosensit-text-h4); }

/* ===================================================================
 * Components — cards
 * =================================================================== */
.card {
  background: var(--gosensit-surface);
  border: 1px solid var(--gosensit-border-color);
  border-radius: var(--gosensit-radius-lg);
  padding: var(--gosensit-space-5);
}
.card--shell { background: var(--gosensit-surface-shell); }
.card-header {
  padding: var(--gosensit-space-4) var(--gosensit-space-5);
  border-bottom: 1px solid var(--gosensit-border-color);
  font-weight: 600;
  color: var(--gosensit-heading);
}

/* ===================================================================
 * Components — form inputs
 * =================================================================== */
.input, .textarea, .select {
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-body);
  width: 100%;
  padding: 10px 12px;
  background: var(--gosensit-input-bg);
  border: 1px solid var(--gosensit-border-color);
  border-radius: var(--gosensit-radius);
  color: var(--gosensit-body);
  transition: border-color var(--gosensit-dur-fast) var(--gosensit-ease),
              box-shadow var(--gosensit-dur-fast) var(--gosensit-ease);
  box-sizing: border-box;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--gosensit-accent);
  box-shadow: var(--gosensit-shadow-focus);
}
.label {
  display: block;
  font-size: var(--gosensit-text-small);
  font-weight: 600;
  color: var(--gosensit-heading);
  margin-bottom: 6px;
}

/* ===================================================================
 * Components — badges
 * =================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--gosensit-font-body);
  font-size: var(--gosensit-text-caption);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--gosensit-radius-pill);
  line-height: 1.4;
}
.badge-orange  { background: var(--gosensit-orange-tint); color: var(--gosensit-orange); }
.badge-success { background: var(--gosensit-success-bg); color: var(--gosensit-success); }
.badge-warning { background: var(--gosensit-warning-bg); color: var(--gosensit-warning); }
.badge-danger  { background: var(--gosensit-danger-bg);  color: var(--gosensit-danger); }
.badge-info    { background: var(--gosensit-info-bg);    color: var(--gosensit-info); }
.badge-neutral { background: var(--gosensit-light-grey); color: var(--gosensit-grey); }

/* ===================================================================
 * Components — table (admin density)
 * =================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gosensit-text-body);
}
.table th, .table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gosensit-border-color);
}
.table th {
  font-weight: 600;
  font-size: var(--gosensit-text-small);
  color: var(--gosensit-body-secondary);
  background: var(--gosensit-surface-shell);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table tr:hover td { background: var(--gosensit-surface-hover); }