/* Lingeman IT — Brand tokens
 * Werkplaats richting · Mei 2026
 * Importeer dit bestand in je website CSS, of gebruik de waarden direct.
 */

:root {
  /* ── Kleuren ───────────────────────────────────────────────── */

  /* Primair */
  --lit-navy:   #0B2540;   /* hoofdkleur — koppen, nav, donkere vlakken */
  --lit-bg:     #FBFAF7;   /* gebroken wit — primaire achtergrond */
  --lit-signal: #2D5BFF;   /* helder signaalblauw — accent, links, knop-hover */

  /* Secundair */
  --lit-navy-2: #173559;   /* iets lichter — kaarten op donker */
  --lit-bg-2:   #F1EFE9;   /* warmer wit — secties, kaders */
  --lit-line:   #D9D5CC;   /* lijnen, borders, dividers */
  --lit-warm:   #C2A878;   /* subtiel warm — alleen detail/portret-frame */
  --lit-ink:    #15171A;   /* tekst — bijna zwart */
  --lit-muted:  #6B7280;   /* meta tekst, mono labels */

  /* ── Typografie ────────────────────────────────────────────── */
  --lit-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lit-font-sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --lit-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Body */
  --lit-text-base: 16px;
  --lit-leading-base: 1.55;

  /* ── Spacing & lijn ───────────────────────────────────────── */
  --lit-radius: 0;          /* Werkplaats gebruikt strakke hoeken */
  --lit-border: 1px solid var(--lit-line);
  --lit-stripe-width: 4px;  /* signal stripe links op briefpapier/cards */
}

/* ── Type-classes ──────────────────────────────────────────── */
.lit-display {
  font-family: var(--lit-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--lit-navy);
  line-height: 1.05;
}
.lit-display-xl { font-size: clamp(48px, 6vw, 72px); }
.lit-display-l  { font-size: clamp(36px, 4.5vw, 48px); }
.lit-display-m  { font-size: clamp(24px, 3vw, 32px); }

.lit-body {
  font-family: var(--lit-font-sans);
  font-size: var(--lit-text-base);
  line-height: var(--lit-leading-base);
  color: var(--lit-ink);
}

.lit-mono-eyebrow {
  font-family: var(--lit-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lit-signal);
}

.lit-mono-meta {
  font-family: var(--lit-font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--lit-muted);
}

/* ── UI primitives ────────────────────────────────────────── */
.lit-btn {
  background: var(--lit-navy);
  color: var(--lit-bg);
  border: none;
  padding: 14px 22px;
  font-family: var(--lit-font-sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}
.lit-btn:hover { background: var(--lit-signal); }

.lit-btn-secondary {
  background: transparent;
  color: var(--lit-ink);
  border: 1px solid var(--lit-line);
  padding: 13px 20px;
  font-family: var(--lit-font-sans);
  font-size: 14px;
  cursor: pointer;
}

.lit-stripe-left {
  position: relative;
}
.lit-stripe-left::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--lit-stripe-width);
  background: var(--lit-signal);
}