/* ─────────────────────────────────────────────────────────────
   Bedrijfsbrein ROI-calculator — local design tokens (ISOLATED to this embed)
   Copied from the TAG design tokens. Edit freely: changes here do
   NOT affect other embeds. @font-face lives in /shared/fonts.css.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ─── Brand palette ──────────────────────────── */
  --tag-dark:    #00032a;   /* Dark base — the anchor */
  --tag-brand-3: #273768;   /* Brand 3 */
  --tag-brand-2: #22386c;   /* Brand 2 */
  --tag-brand-1: #1d5389;   /* Brand 1 — primary blue */
  --tag-brand-4: #5aaece;   /* Brand 4 — sky accent */
  --tag-accent:  #1e90ff;   /* CTA / action blue */
  --tag-off:     #f4f6fa;   /* Off-white surface */
  --tag-white:   #ffffff;

  /* Tinted surfaces (derived from brand) */
  --tag-b1-tint:   rgba(29,83,137,0.08);
  --tag-b1-tint-s: rgba(29,83,137,0.20);
  --tag-b4-tint:   rgba(90,174,206,0.12);
  --tag-b4-tint-s: rgba(90,174,206,0.18);
  --tag-accent-tint: rgba(30,144,255,0.10);

  /* ─── Semantic foreground colors ─────────────── */
  --fg1:     #00032a;            /* Primary text on light */
  --fg2:     #273768;            /* Secondary text on light */
  --fg3:     #666b80;            /* Tertiary / meta */
  --fg-mute: #9aa0b4;            /* Placeholder, faint labels */

  --fg1-on-dark:     #ffffff;
  --fg2-on-dark:     rgba(255,255,255,0.75);
  --fg3-on-dark:     rgba(255,255,255,0.55);
  --fg-mute-on-dark: rgba(255,255,255,0.40);

  /* ─── Semantic surfaces / borders ────────────── */
  --bg-app:     #f0f2f7;          /* App background */
  --bg-surface: #ffffff;          /* Cards, sheets */
  --bg-subtle:  #f4f6fa;          /* Off-white surface */
  --bg-dark:    #00032a;          /* Full-bleed dark surface */

  --border-1: #dde1ec;            /* Default hairline */
  --border-2: #f0f2f8;            /* Interior divider (lighter) */
  --border-on-dark: rgba(255,255,255,0.12);

  /* ─── State colors ───────────────────────────── */
  --state-hover-on-light: rgba(0,3,42,0.04);
  --state-hover-on-dark:  rgba(255,255,255,0.06);
  --state-focus-ring:     rgba(30,144,255,0.35);

  /* ─── Radii ──────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;      /* Buttons, tags */
  --r-lg: 10px;     /* Swatches, images */
  --r-xl: 12px;     /* Cards */
  --r-2xl: 16px;
  --r-pill: 999px;

  /* ─── Spacing scale (4px base) ───────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ─── Elevation ──────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,3,42,0.06);
  --shadow-2: 0 2px 8px rgba(0,3,42,0.08);
  --shadow-3: 0 6px 24px rgba(0,3,42,0.10);
  --shadow-toast: 0 4px 20px rgba(0,0,0,0.30);

  /* ─── Motion ─────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-med:  250ms;
  --ease-std: cubic-bezier(.2,.7,.2,1);

  /* ─── Type families ──────────────────────────── */
  --font-display: 'Agentic', Georgia, 'Times New Roman', serif;
  --font-body:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

  /* ─── Type scale (desktop) ──────────────────── */
  --t-display: 700 clamp(40px, 5vw, 56px) / 1.05 var(--font-display);
  --t-h1:      700 clamp(28px, 3.2vw, 38px) / 1.15 var(--font-display);
  --t-h2:      700 clamp(22px, 2.2vw, 28px) / 1.2  var(--font-display);
  --t-h3:      600 18px / 1.35 var(--font-body);
  --t-lead:    400 18px / 1.6  var(--font-body);
  --t-body:    400 15px / 1.7  var(--font-body);
  --t-small:   400 13px / 1.55 var(--font-body);
  --t-micro:   500 11px / 1.4  var(--font-body);
  --t-cta:     600 12px / 1 var(--font-body);
  --t-mono:    400 13px / 1.5 var(--font-mono);

  /* ─── Tracking ───────────────────────────────── */
  --track-tight:  -0.01em;
  --track-flat:    0em;
  --track-loose:   0.04em;
  --track-caps:    0.10em;

  /* ─── Layout ─────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* ─── Semantic element defaults ───────────────── */
body {
  font: var(--t-body);
  color: var(--fg1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font: var(--t-h1);      color: var(--fg1); letter-spacing: var(--track-tight); }
h2, .h2 { font: var(--t-h2);      color: var(--fg1); }
h3, .h3 { font: var(--t-h3);      color: var(--fg1); }
.display { font: var(--t-display); color: var(--fg1); letter-spacing: var(--track-tight); }
.lead    { font: var(--t-lead);    color: var(--fg2); }
p, .body { font: var(--t-body);    color: var(--fg2); }
small, .small { font: var(--t-small); color: var(--fg3); }
.micro   { font: var(--t-micro);   color: var(--fg3); letter-spacing: var(--track-loose); text-transform: uppercase; }
.cta-label { font: var(--t-cta); color: var(--tag-accent); letter-spacing: var(--track-caps); text-transform: uppercase; }
code, .mono { font: var(--t-mono); color: var(--fg2); }

/* The signature emphasis: serif regular in brand blue */
em.brand, .brand-em {
  font-style: normal;
  color: var(--tag-brand-1);
  font-family: var(--font-display);
}