/* ============================================================
   TAPPED — Colors & Type foundation
   Source of truth: Tapped Huisstijl 2026 (brandsheet) + tapped.nl
   Load this file from any HTML; @font-face urls resolve relative
   to THIS file (project root), so keep it at root.
   ============================================================ */

/* ----------  FONTS  ---------- */
/* Space Grotesk — primary workhorse (body + headings) */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Light.woff2") format("woff2"),
       url("fonts/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.woff2") format("woff2"),
       url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Medium.woff2") format("woff2"),
       url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"),
       url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.woff2") format("woff2"),
       url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* DOVAZ — display / logo face. Geometric, monospaced-tech.
   Brand rule: reserved for the logo & rare oversized display moments. */
@font-face {
  font-family: "DOVAZ";
  src: url("fonts/DOVAZ.woff2") format("woff2"),
       url("fonts/DOVAZ.woff") format("woff"),
       url("fonts/DOVAZ.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ----------  BRAND PALETTE (from brandsheet)  ---------- */
  --ink-black:      #0D1B2A;  /* Primair   — RGB 13,27,42  */
  --tropical-mint:  #3BE29D;  /* Secundair — RGB 59,226,157 */
  --persian-blue:   #0343CE;  /* Tertiair  — RGB 3,67,206  */
  --alabaster-grey: #E3E6E9;  /* Support   — RGB 227,230,233 */

  /* ----------  BLUE SCALE (derived from Persian Blue)  ---------- */
  --blue-50:  #EAF0FE;
  --blue-100: #D2DFFD;
  --blue-200: #A6BEFB;
  --blue-300: #6E92F4;
  --blue-400: #2F62E6;
  --blue-500: #0343CE;   /* = Persian Blue, primary action */
  --blue-600: #0335A6;   /* hover */
  --blue-700: #052B86;   /* active / pressed */
  --blue-800: #082360;

  /* ----------  MINT SCALE (derived from Tropical Mint)  ---------- */
  --mint-50:  #E7FBF2;
  --mint-100: #C4F5DF;
  --mint-200: #8FEDC3;
  --mint-300: #3BE29D;   /* = Tropical Mint */
  --mint-400: #1FC983;   /* deeper, for text/icon on light */
  --mint-500: #12A86B;
  --mint-600: #0C8556;

  /* ----------  NEUTRALS (navy-tinted, anchored to Ink Black)  ---------- */
  --white:   #FFFFFF;
  --grey-50:  #F9FAFB;   /* page background (site theme-color) */
  --grey-100: #F1F3F5;
  --grey-150: #E9ECEF;
  --grey-200: #E3E6E9;   /* = Alabaster Grey — hairlines, fills */
  --grey-300: #CDD3DA;
  --grey-400: #A7B0BB;
  --grey-500: #79838F;
  --grey-600: #515D6B;
  --grey-700: #36404D;
  --grey-800: #1E2A38;
  --grey-900: #0D1B2A;   /* = Ink Black */

  /* ----------  SEMANTIC ROLES  ---------- */
  --bg:            var(--grey-50);
  --bg-elevated:   var(--white);
  --bg-ink:        var(--ink-black);     /* dark sections */
  --fg-1:          var(--ink-black);     /* primary text */
  --fg-2:          var(--grey-600);      /* secondary text */
  --fg-3:          var(--grey-500);      /* muted / captions */
  --fg-on-ink:     var(--grey-50);       /* text on dark */
  --fg-on-blue:    #FFFFFF;
  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --accent:        var(--persian-blue);  /* primary brand action */
  --accent-2:      var(--tropical-mint); /* highlight / success */
  --focus-ring:    var(--blue-300);

  /* status (derived to live alongside the brand) */
  --success: var(--mint-400);
  --warning: #E8A317;
  --danger:  #E5484D;
  --info:    var(--persian-blue);

  /* ----------  TYPE FAMILIES  ---------- */
  --font-sans:    "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "DOVAZ", "Space Grotesk", sans-serif;

  /* ----------  TYPE SCALE (1.250 major-third, 16px base)  ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */
  --text-6xl:  5.5rem;    /* 88 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal:1.55;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;

  /* ----------  RADII  ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

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

  /* ----------  SHADOWS (soft, cool, low-spread — match brand imagery)  ---------- */
  --shadow-xs: 0 1px 2px rgba(13,27,42,0.06);
  --shadow-sm: 0 2px 6px rgba(13,27,42,0.06), 0 1px 2px rgba(13,27,42,0.04);
  --shadow-md: 0 8px 24px rgba(13,27,42,0.08), 0 2px 6px rgba(13,27,42,0.05);
  --shadow-lg: 0 20px 48px rgba(13,27,42,0.12), 0 6px 14px rgba(13,27,42,0.06);
  --shadow-blue: 0 12px 28px rgba(3,67,206,0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — apply directly or copy the rules.
   Headings use Space Grotesk; reserve --font-display/DOVAZ for
   logo lockups and rare hero numerals.
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: 1;
  letter-spacing: 0;
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}
.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.t-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
/* Eyebrow / label — uppercase, tracked, often mint or blue */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}