/* Multifurn design tokens. Bron: Figma Design System B2B portaal (27-08-2026) */

/* Plus Jakarta Sans lokaal (A8): geen externe lettertypeserver, sneller eerste beeld. */
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/pjs-400.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/pjs-600.ttf') format('truetype'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/pjs-700.ttf') format('truetype'); }

:root {
  /* General */
  --mf-bg: #F6F4F0;
  --mf-accent: #F1EAE4;
  --mf-border: #EDE9E2;
  --mf-white: #FFFFFF;

  /* Text */
  --mf-text-primary: #171614;
  --mf-text-secondary: #5C5852;
  --mf-text-muted: #A19B90;
  --mf-text-inverse: #FFFFFF;

  /* CTA / status */
  --mf-cta: #A2482A;
  --mf-cta-hover: #7B3720;
  --mf-positive: #4C7A5B;
  --mf-wait: #B07A30;    /* voorlopig, verifieer in Figma */
  --mf-warning: #96392F; /* voorlopig, verifieer in Figma */

  /* Typography */
  --mf-font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --mf-h1: 700 42px/54px var(--mf-font);
  --mf-h2: 700 30px/38px var(--mf-font);
  --mf-h3: 700 24px/32px var(--mf-font);
  --mf-h4: 700 18px/24px var(--mf-font);
  --mf-body: 400 16px/26px var(--mf-font);
  --mf-body-sm: 400 14px/24px var(--mf-font);
  --mf-ui: 600 14px/24px var(--mf-font);
  --mf-label: 600 12px/12px var(--mf-font);

  /* Radius, layout, effects */
  --mf-radius-sm: 8px;
  --mf-radius-lg: 16px;
  --mf-radius-full: 9999px;
  --mf-sidebar: 280px;
  --mf-content: 1168px;
  --mf-gutter: 20px;
  --mf-margin: 32px;
  --mf-shadow-hover: 0 16px 30px rgba(0, 0, 0, 0.12);
}

body { background: var(--mf-bg); color: var(--mf-text-secondary); font: var(--mf-body); }
h1 { font: var(--mf-h1); color: var(--mf-text-primary); }
h2 { font: var(--mf-h2); color: var(--mf-text-primary); }
h3 { font: var(--mf-h3); color: var(--mf-text-primary); }
h4 { font: var(--mf-h4); color: var(--mf-text-primary); }

.mf-btn { height: 46px; padding: 0 16px; border-radius: var(--mf-radius-sm); font: var(--mf-ui); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.mf-btn--primary { background: var(--mf-cta); color: var(--mf-white); }
.mf-btn--primary:hover { background: var(--mf-cta-hover); }
.mf-btn--dark { background: var(--mf-text-primary); color: var(--mf-white); }
.mf-btn--dark:hover { background: var(--mf-text-secondary); }
.mf-btn--ghost { background: var(--mf-white); color: var(--mf-text-primary); border-color: var(--mf-border); }
.mf-btn--ghost:hover { background: var(--mf-accent); }
.mf-link { font: var(--mf-ui); color: var(--mf-text-primary); text-decoration: underline; display: inline-flex; gap: 8px; }
.mf-link:hover { text-decoration: none; }

.mf-label { height: 32px; padding: 0 12px; border-radius: var(--mf-radius-lg); font: var(--mf-label); display: inline-flex; align-items: center; border: 1px solid var(--mf-border); background: var(--mf-white); color: var(--mf-text-primary); }
.mf-label--accent { background: var(--mf-accent); border-color: var(--mf-accent); }
.mf-label--sale { background: var(--mf-cta); border-color: var(--mf-cta); color: var(--mf-white); }
.mf-label--dark { background: var(--mf-text-primary); border-color: var(--mf-text-primary); color: var(--mf-white); }
.mf-label--positive { border-color: var(--mf-positive); color: var(--mf-positive); }

.mf-card { background: var(--mf-white); border: 1px solid var(--mf-border); border-radius: var(--mf-radius-sm); padding: 16px; transition: transform .15s, box-shadow .15s; }
.mf-card--lg { border-radius: var(--mf-radius-lg); }
.mf-card:hover { box-shadow: var(--mf-shadow-hover); transform: translateY(-1px); }