/* ================================================================
   CODED CONCEPTS — Brand Tokens v1.3
   Bron: cc-brand-v1.2 / website-edition
   Regel: nooit hardcoded hex buiten dit bestand
   ================================================================ */

:root {
  /* ---- Primary 60/30/10 ---- */
  --cc-surface:           #F5EFE0;
  --cc-primary:           #1F3A2E;
  --cc-accent:            #C04A2E;

  /* ---- Text ---- */
  --cc-text-primary:      #1F3A2E;
  --cc-text-on-dark:      #F5EFE0;
  --cc-text-muted:        rgba(31, 58, 46, 0.6);
  --cc-text-subtle:       rgba(31, 58, 46, 0.4);
  --cc-text-on-dark-muted: rgba(245, 239, 224, 0.6);
  --cc-text-on-dark-subtle: rgba(245, 239, 224, 0.4);

  /* ---- Borders ---- */
  --cc-border-subtle:     rgba(31, 58, 46, 0.12);
  --cc-border-default:    rgba(31, 58, 46, 0.24);
  --cc-border-strong:     rgba(31, 58, 46, 0.48);
  --cc-border-inv-subtle: rgba(245, 239, 224, 0.12);
  --cc-border-inv-default:rgba(245, 239, 224, 0.24);

  /* ---- Surfaces ---- */
  --cc-surface-raised:    #FAF5E8;
  --cc-surface-sunken:    #ECE4D0;
  --cc-inverse-surface:   #1F3A2E;
  --cc-inverse-primary:   #F5EFE0;

  /* ---- Typografie ---- */
  --cc-font-display:      'Archivo Black', system-ui, sans-serif;
  --cc-font-body:         'Inter', system-ui, sans-serif;
  --cc-font-mono:         'JetBrains Mono', ui-monospace, monospace;

  --cc-tracking-wordmark: -0.005em;
  --cc-tracking-mark:     -0.06em;
  --cc-tracking-caps:     0.02em;

  /* ---- Responsive type ---- */
  --cc-text-hero:    clamp(44px, 7.2vw, 104px);
  --cc-text-statement: clamp(36px, 5.5vw, 80px);
  --cc-text-section: clamp(40px, 6vw, 96px);
  --cc-text-heading: clamp(24px, 3vw, 48px);
  --cc-text-body:    clamp(15px, 1.05vw, 18px);
  --cc-text-mono:    13px;

  /* ---- Spacing ---- */
  --cc-space-1: 4px;   --cc-space-2: 8px;
  --cc-space-3: 12px;  --cc-space-4: 16px;
  --cc-space-6: 24px;  --cc-space-8: 32px;
  --cc-space-12: 48px; --cc-space-16: 64px;
  --cc-space-24: 96px; --cc-space-32: 128px;

  /* ---- Radii (radius=0 voor technische elementen) ---- */
  --cc-radius-sm: 4px;
  --cc-radius-md: 8px;

  /* ---- Layout ---- */
  --cc-container:  1280px;
  --cc-gutter:     clamp(20px, 4vw, 64px);
  --cc-nav-h:      64px;

  /* ---- Project-accenten (sub-brand-identifiers) ---- */
  --cc-acc-teal:   #2A7B7B;
  --cc-acc-ink:    #0E1716;
  --cc-acc-purple: #6B4FBB;
  --cc-acc-mono:   #1F1F1F;

  /* ---- Motion ---- */
  --cc-ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --cc-ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --cc-dur-fast:   180ms;
  --cc-dur-base:   320ms;
  --cc-dur-slow:   600ms;
  --cc-dur-stage:  800ms;

  /* ---- Scroll progress (gezet door main.js) ---- */
  --scroll-progress: 0;
}