/* =============================================================
   Taxhouse — Colors & Type
   Single source of truth for the design system. Import this in
   every preview / UI kit / slide file:
     <link rel="stylesheet" href="/colors_and_type.css">

   Brand pillars
   - Premium Dutch fiscal advisory ("scherp, persoonlijk, een stap vooruit")
   - Confident, calm, trustworthy. Not flashy.
   - Logo: deep midnight-navy + warm "guilder" gold + crisp white
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* -------- BRAND PALETTE -------- */
  /* Pulled directly from the wordmark on a navy ground. */
  --th-navy-900:        #08061C;   /* deepest, used sparingly */
  --th-navy-800:        #0F0B2B;   /* primary brand surface (the logo bg) */
  --th-navy-700:        #1A1540;   /* hover/elevated navy */
  --th-navy-600:        #261F54;
  --th-navy-500:        #352C6B;

  --th-gold-700:        #B47E22;
  --th-gold-600:        #CE9229;   /* darker gold (press / on light bg) */
  --th-gold-500:        #E5A437;   /* SIGNATURE GOLD — roof, € symbol, tagline */
  --th-gold-400:        #EFB962;
  --th-gold-300:        #F6D196;
  --th-gold-200:        #FBE6C2;
  --th-gold-100:        #FCF1DF;
  --th-gold-50:         #FDF8EE;

  /* Neutrals — warm-leaning so they sit comfortably next to gold */
  --th-ink-900:         #0F1024;   /* near-black headings on light bg */
  --th-ink-800:         #1B1D38;
  --th-ink-700:         #2A2D52;
  --th-ink-600:         #4A4E78;
  --th-ink-500:         #6B6F95;
  --th-ink-400:         #9094B5;
  --th-ink-300:         #C2C5DA;
  --th-ink-200:         #E0E2EE;
  --th-ink-100:         #EFF0F7;
  --th-ink-50:          #F7F8FC;

  --th-paper:           #FBFAF6;   /* off-white, warm — primary light surface */
  --th-paper-2:         #F4F1E8;   /* "document" beige for sections */
  --th-white:           #FFFFFF;

  /* Semantic */
  --th-success:         #2E7D5B;
  --th-warning:         #C77A1B;
  --th-danger:          #B33A3A;
  --th-info:            #3B5BB8;

  /* -------- SEMANTIC TOKENS (LIGHT, default) -------- */
  --bg:                 var(--th-paper);
  --bg-elevated:        var(--th-white);
  --bg-muted:           var(--th-paper-2);
  --bg-inverse:         var(--th-navy-800);

  --fg:                 var(--th-ink-900);    /* primary text */
  --fg-muted:           var(--th-ink-600);    /* secondary text */
  --fg-subtle:          var(--th-ink-500);    /* meta / captions */
  --fg-on-navy:         var(--th-paper);
  --fg-on-gold:         var(--th-navy-900);

  --accent:             var(--th-gold-500);
  --accent-hover:       var(--th-gold-600);
  --accent-press:       var(--th-gold-700);
  --accent-soft:        var(--th-gold-100);

  --brand:              var(--th-navy-800);
  --brand-hover:        var(--th-navy-700);
  --brand-press:        var(--th-navy-900);

  --line:               var(--th-ink-200);
  --line-strong:        var(--th-ink-300);
  --line-on-navy:       rgba(255,255,255,.12);

  --focus-ring:         0 0 0 3px rgba(229,164,55,0.45);

  /* -------- TYPE SYSTEM -------- */
  /* Display = Source Serif 4 (warm editorial serif — fiscal-document feel)
     UI/Body = Manrope (geometric sans, matches the soft-curved geometric
     wordmark in the logo, supports cijfers/getallen well)
     Numerics = same Manrope w/ tabular-nums for tables, prices.        */
  --font-display:       "Source Serif 4", "Charter", Georgia, "Times New Roman", serif;
  --font-sans:          "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --font-num:           var(--font-sans);

  /* Type scale — modular ~1.2 step, generous on the display end. */
  --fs-12:              0.75rem;     /* 12 — micro / overline */
  --fs-13:              0.8125rem;   /* 13 — meta */
  --fs-14:              0.875rem;    /* 14 — small body */
  --fs-15:              0.9375rem;
  --fs-16:              1rem;        /* 16 — body */
  --fs-18:              1.125rem;    /* 18 — lede */
  --fs-20:              1.25rem;
  --fs-24:              1.5rem;      /* 24 — h4 */
  --fs-28:              1.75rem;
  --fs-32:              2rem;        /* 32 — h3 */
  --fs-40:              2.5rem;      /* 40 — h2 */
  --fs-52:              3.25rem;     /* 52 — h1 */
  --fs-72:              4.5rem;      /* 72 — display */

  --lh-tight:           1.08;
  --lh-snug:            1.2;
  --lh-normal:          1.45;
  --lh-loose:           1.65;

  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-caps:      0.16em;     /* used for the BELASTINGADVIES tagline style */

  /* -------- SPACING (4px base) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -------- RADII -------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;     /* default */
  --radius-lg: 14px;    /* cards */
  --radius-xl: 22px;    /* panels / hero blocks */
  --radius-pill: 999px;

  /* -------- ELEVATION --------
     Tax-advisory feel: shadows are subtle and warm (cast through paper),
     never blue/cool. Use sparingly — borders do most of the work. */
  --shadow-xs:  0 1px 2px rgba(15,16,36,0.04);
  --shadow-sm:  0 1px 2px rgba(15,16,36,0.05), 0 2px 6px rgba(15,16,36,0.04);
  --shadow-md:  0 4px 10px rgba(15,16,36,0.06), 0 2px 4px rgba(15,16,36,0.04);
  --shadow-lg:  0 14px 30px rgba(15,16,36,0.08), 0 4px 8px rgba(15,16,36,0.04);
  --shadow-xl:  0 28px 60px rgba(15,16,36,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* -------- MOTION -------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* =============================================================
   Dark / on-navy context. Apply by adding `.on-navy` to a section
   or wrapping with <body class="theme-navy">. Components don't
   need to know — they just consume the same semantic tokens.
   ============================================================= */
.theme-navy,
.on-navy {
  --bg:               var(--th-navy-800);
  --bg-elevated:      var(--th-navy-700);
  --bg-muted:         var(--th-navy-900);
  --fg:               var(--th-paper);
  --fg-muted:         rgba(251,250,246,0.72);
  --fg-subtle:        rgba(251,250,246,0.5);
  --line:             rgba(255,255,255,0.12);
  --line-strong:      rgba(255,255,255,0.22);
  color: var(--fg);
  background: var(--bg);
}

/* =============================================================
   Element defaults — drop into any page that imports this file
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display serif for weight & gravitas, sans available via .h-sans */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-52);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--fg);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-28);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

/* Display — for hero numbers, big quotes */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-72);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* Eyebrow / overline — references the BELASTINGADVIES caps in the wordmark */
.eyebrow,
.overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

/* Paragraphs */
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.p-lede { font-size: var(--fs-20); line-height: 1.5; color: var(--fg-muted); }
.p-small { font-size: var(--fs-14); line-height: 1.55; color: var(--fg-muted); }
.meta { font-size: var(--fs-13); color: var(--fg-subtle); letter-spacing: 0.01em; }

/* Inline */
a {
  color: var(--accent-press);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--accent-hover); }
.on-navy a, .theme-navy a { color: var(--th-gold-400); }
.on-navy a:hover, .theme-navy a:hover { color: var(--th-gold-300); }

strong, b { font-weight: 700; color: var(--fg); }
em, i { font-style: italic; }

/* Numbers — tabular for tables, prices, percentages */
.num,
table.num td,
table.num th {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Code (rare in this brand, but defined) */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--th-ink-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection { background: var(--th-gold-200); color: var(--th-navy-900); }

/* Focus — gold ring, never browser blue */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Horizontal rule — thin gold accent line, the brand's "underline" gesture */
hr.gold {
  border: 0;
  height: 2px;
  width: 48px;
  background: var(--accent);
  margin: var(--space-6) 0;
}