/* ============================================================================
   KOMPAS DESIGN TOKENS — single source of truth for the three marketing sites
   (alimentatieinzicht.nl, assetinzicht.nl, kompaslegal.nl).

   MASTER FILE. Lives in kompas-branding/. A verbatim copy is deployed to each
   site and @imported as the first line of that site's styles.css:
     alimentatieinzicht.nl/tokens.css
     assetinzicht.nl/assets/css/tokens.css
     kompaslegal.nl/tokens.css
   Change a value HERE, re-sync the copies, and all three sites update.

   Each site's styles.css aliases its local tokens to these (e.g.
   `--gold: var(--kl-gold)`), so no site hardcodes brand values.

   Canonical brand gold = #b68b3c (antique gold). #c9972a is deprecated.
   ========================================================================== */

:root {
  /* ── Brand palette (constant across light/dark) ──────────────────────── */
  --kl-navy:        #14213d;  /* primary navy / body ink */
  --kl-navy-deep:   #0e1830;  /* dark-mode page background */
  --kl-navy-800:    #0f1729;  /* deepest navy — hero / dark header */
  --kl-navy-600:    #23395d;  /* navy mid-tone (borders on navy, ink-soft) */
  --kl-navy-mid:    #1e3060;  /* logo badge gradient */
  --kl-gold:        #b68b3c;  /* canonical brand gold (accent) */
  --kl-gold-light:  #d1ac66;  /* gold gradient end / hover lift */
  --kl-gold-bright: #e0b96a;  /* brighter glow variant (asset hero) */
  --kl-gold-dark:   #7c5a1e;
  --kl-gold-ink:    #241908;  /* ink on gold fills */
  --kl-bronze:      #8a5e12;  /* bronze-gold accent text on light bg */
  --kl-champagne:   #d9c29c;  /* light gold accent on dark grounds */
  --kl-burgundy:    #6b2432;  /* secondary accent — use sparingly */
  --kl-sand:        #ede3cf;  /* brand paper reference */
  --kl-paper:       #f8f6f2;  /* light page background (warm white) */
  --kl-cream:       #f3ead8;  /* light panel inside dark mode */
  --kl-white:       #ffffff;
  --kl-muted:       #5b6675;  /* muted / secondary text on light */

  /* ── Status ──────────────────────────────────────────────────────────── */
  --kl-success:     #1f7a5a;
  --kl-warning:     #b5731a;
  --kl-error:       #b3261e;
  --kl-info:        #2563a8;

  /* ── Semantic colour aliases (light) — convenient names ──────────────── */
  --color-brand-primary:       var(--kl-navy);
  --color-brand-accent:        var(--kl-gold);
  --color-brand-accent-hover:  var(--kl-gold-dark);
  --color-brand-secondary:     var(--kl-burgundy);
  --color-background-page:      var(--kl-paper);
  --color-background-surface:   var(--kl-white);
  --color-background-muted:     var(--kl-sand);
  --color-text-primary:         var(--kl-navy);
  --color-text-secondary:       var(--kl-navy-600);
  --color-text-muted:           var(--kl-muted);
  --color-text-inverse:         var(--kl-white);
  --color-border-default:       rgba(20, 33, 61, 0.12);
  --color-border-subtle:        rgba(20, 33, 61, 0.08);
  --color-border-strong:        rgba(20, 33, 61, 0.20);
  --color-success:              var(--kl-success);
  --color-warning:              var(--kl-warning);
  --color-error:                var(--kl-error);
  --color-info:                 var(--kl-info);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --kl-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* High-contrast Didone for display/section headings only (echoes the Didot
     wordmark). Self-hosted woff2 per site — @font-face lives in each styles.css. */
  --kl-font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --kl-tracking-eyebrow: 0.16em;

  --kl-text-display: clamp(2.5rem, 5vw, 3.5rem);  /* 40–56px */
  --kl-text-h1:      clamp(2rem, 4vw, 2.75rem);   /* 32–44px */
  --kl-text-h2:      clamp(1.5rem, 3vw, 2rem);    /* 24–32px */
  --kl-text-h3:      1.5rem;                       /* 24px */
  --kl-text-h4:      1.25rem;                      /* 20px */
  --kl-text-body-lg: 1.125rem;                     /* 18px */
  --kl-text-body:    1rem;                          /* 16px */
  --kl-text-body-sm: 0.875rem;                      /* 14px */
  --kl-text-caption: 0.75rem;                       /* 12px */

  --kl-weight-regular:  400;
  --kl-weight-medium:   500;
  --kl-weight-semibold: 600;
  --kl-weight-bold:     700;
  --kl-weight-black:    800;

  --kl-leading-tight:   1.1;
  --kl-leading-heading: 1.2;
  --kl-leading-body:    1.6;

  /* ── Spacing scale ───────────────────────────────────────────────────── */
  --kl-space-1: 4px;
  --kl-space-2: 8px;
  --kl-space-3: 12px;
  --kl-space-4: 16px;
  --kl-space-5: 24px;
  --kl-space-6: 32px;
  --kl-space-7: 48px;
  --kl-space-8: 64px;
  --kl-space-9: 96px;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --kl-radius-sm:   8px;
  --kl-radius-md:   12px;
  --kl-radius-lg:   18px;
  --kl-radius-xl:   28px;
  --kl-radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --kl-shadow-sm:   0 10px 30px -14px rgba(20, 33, 61, 0.25);
  --kl-shadow:      0 14px 40px rgba(20, 33, 61, 0.08);
  --kl-shadow-lg:   0 22px 70px rgba(20, 33, 61, 0.12);
  /* Long, soft, low-opacity "luxe" lift for premium cards / result blocks. */
  --kl-shadow-luxe: 0 24px 60px -28px rgba(20, 33, 61, 0.30);

  /* Hairline border colour — prefer 0.5px hairlines over solid 1px lines. */
  --kl-hairline: rgba(20, 33, 61, 0.10);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --kl-content-width: 1180px;     /* canonical marketing content column */
  --kl-content-width-narrow: 1100px;
  --kl-page-pad-mobile:  1rem;    /* 16px */
  --kl-page-pad-tablet:  1.5rem;  /* 24px */
  --kl-page-pad-desktop: 1.5rem;  /* 24px */
  --kl-header-height: 64px;

  /* ── Icon sizes ──────────────────────────────────────────────────────── */
  --kl-icon-sm: 16px;
  --kl-icon-md: 20px;
  --kl-icon-lg: 24px;
  --kl-icon-xl: 32px;
  --kl-icon-2xl: 48px;

  /* ── Z-index scale ───────────────────────────────────────────────────── */
  --kl-z-base:     1;
  --kl-z-header:   100;
  --kl-z-dropdown: 200;
  --kl-z-backdrop: 900;
  --kl-z-modal:    1000;
  --kl-z-toast:    1100;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --kl-transition-fast: 0.15s ease;
  --kl-transition:      0.25s ease;

  /* ── Breakpoints (reference only) ────────────────────────────────────────
     CSS custom properties CANNOT be used inside @media queries, so these are
     documentation of the canonical breakpoints — use these exact px literals
     in media queries across all three sites:
       sm 480px · md 768px · lg 980px (nav collapse) · xl 1280px · 2xl 1440px */
  --kl-bp-sm:  480px;
  --kl-bp-md:  768px;
  --kl-bp-lg:  980px;
  --kl-bp-xl:  1280px;
  --kl-bp-2xl: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kl-transition-fast: 0s;
    --kl-transition: 0s;
  }
}

/* ── Shared utility classes ──────────────────────────────────────────────── */

/* Tabular figures — keeps euro/percentage columns aligned. Use on any number. */
.kl-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Section eyebrow: tracked uppercase label preceded by a short gold hairline.
   Bronze reads well on light grounds; on dark grounds set color:var(--kl-champagne)
   via the host site's dark-theme rule. */
.kl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-space-3);
  font-size: var(--kl-text-caption);
  font-weight: var(--kl-weight-medium);
  letter-spacing: var(--kl-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kl-bronze);
}
.kl-eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 1px;
  background: var(--kl-gold);
  flex: none;
}