/* ==========================================================================
   TerraScope huisstijl — design tokens (v1.2 · sepia)
   Paden naar fonts gaan uit van de mapstructuur van dit pakket.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/web/InterTight-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/web/InterTight-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/web/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/web/Inter-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Merkkleuren ---------- */
  --ts-magenta:   #E01E6A;  /* lens, accenten, grafisch — niet voor kleine tekst */
  --ts-ink:       #241F1B;  /* woordmerk, tekst, donkere vlakken (warm zwart) */
  --ts-sepia:     #F4EFE6;  /* hoofdachtergrond */
  --ts-zand:      #EAE2D3;  /* tweede vlak, secties */
  --ts-light:     #FAF7F2;  /* "wit" van de huisstijl: kaarten, letters op donker */

  /* Magenta-schaal */
  --ts-magenta-50:  #FBE7E9;
  --ts-magenta-100: #F8D6DE;
  --ts-magenta-200: #F4B3C8;
  --ts-magenta-300: #ED83A9;
  --ts-magenta-400: #E64E88;  /* links in donker thema (4,9:1) */
  --ts-magenta-500: #E01E6A;
  --ts-magenta-600: #C2185B;  /* links en knoppen (5,1:1 op sepia; wit erop 5,9:1) */
  --ts-magenta-700: #A30F47;  /* hover/actief */
  --ts-magenta-800: #7A0B35;
  --ts-magenta-900: #5A0827;

  /* Warme neutrale schaal (sepia → ink) */
  --ts-neutral-0:   #FFFFFF;
  --ts-neutral-50:  #FAF7F2;
  --ts-neutral-100: #F4EFE6;
  --ts-neutral-200: #EAE2D3;
  --ts-neutral-300: #DCD1BE;
  --ts-neutral-400: #B5A893;
  --ts-neutral-500: #6E6355;  /* hulptekst (5,1:1 op sepia) */
  --ts-neutral-600: #5B5145;  /* secundaire tekst (6,8:1 op sepia) */
  --ts-neutral-700: #423A32;
  --ts-neutral-800: #2E2823;
  --ts-neutral-900: #241F1B;
  --ts-neutral-950: #1C1815;

  /* Statuskleuren (tekst op sepia ≥ 5,4:1) */
  --ts-success: #276B44;
  --ts-warning: #8F4A00;
  --ts-danger:  #B33224;
  --ts-info:    #1B62A0;

  /* ---------- Semantische tokens: licht thema ---------- */
  --color-bg:             var(--ts-sepia);
  --color-bg-subtle:      var(--ts-zand);
  --color-surface:        var(--ts-light);
  --color-surface-raised: var(--ts-neutral-0);
  --color-border:         var(--ts-neutral-300);
  --color-border-strong:  var(--ts-neutral-400);
  --color-text:           var(--ts-ink);
  --color-text-muted:     var(--ts-neutral-600);
  --color-text-subtle:    var(--ts-neutral-500);
  --color-accent:         var(--ts-magenta-500);
  --color-link:           var(--ts-magenta-600);
  --color-link-hover:     var(--ts-magenta-700);
  --color-primary:        var(--ts-magenta-600);
  --color-primary-hover:  var(--ts-magenta-700);
  --color-on-primary:     var(--ts-light);
  --color-focus:          var(--ts-magenta-500);
  --color-selection:      var(--ts-magenta-100);

  /* ---------- Typografie ---------- */
  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */

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

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-label:    0.04em;

  /* ---------- Ruimte (4 px-raster) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ---------- Vorm ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(36 31 27 / 0.06);
  --shadow-md: 0 2px 8px rgb(36 31 27 / 0.08), 0 1px 2px rgb(36 31 27 / 0.06);
  --shadow-lg: 0 12px 32px rgb(36 31 27 / 0.12), 0 2px 6px rgb(36 31 27 / 0.06);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

/* ---------- Donker thema ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:             var(--ts-neutral-950);
    --color-bg-subtle:      var(--ts-ink);
    --color-surface:        var(--ts-neutral-800);
    --color-surface-raised: var(--ts-neutral-700);
    --color-border:         var(--ts-neutral-700);
    --color-border-strong:  var(--ts-neutral-600);
    --color-text:           var(--ts-sepia);
    --color-text-muted:     var(--ts-neutral-400);
    --color-text-subtle:    var(--ts-neutral-400);
    --color-link:           var(--ts-magenta-400);
    --color-link-hover:     var(--ts-magenta-300);
    --color-primary:        var(--ts-magenta-600);
    --color-primary-hover:  var(--ts-magenta-500);
    --color-selection:      var(--ts-magenta-800);
    --ts-success: #4CC28A;
    --ts-warning: #E8A23A;
    --ts-danger:  #F2766A;
    --ts-info:    #6AAEEB;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg:             var(--ts-neutral-950);
  --color-bg-subtle:      var(--ts-ink);
  --color-surface:        var(--ts-neutral-800);
  --color-surface-raised: var(--ts-neutral-700);
  --color-border:         var(--ts-neutral-700);
  --color-border-strong:  var(--ts-neutral-600);
  --color-text:           var(--ts-sepia);
  --color-text-muted:     var(--ts-neutral-400);
  --color-text-subtle:    var(--ts-neutral-400);
  --color-link:           var(--ts-magenta-400);
  --color-link-hover:     var(--ts-magenta-300);
  --color-primary:        var(--ts-magenta-600);
  --color-primary-hover:  var(--ts-magenta-500);
  --color-selection:      var(--ts-magenta-800);
  --ts-success: #4CC28A;
  --ts-warning: #E8A23A;
  --ts-danger:  #F2766A;
  --ts-info:    #6AAEEB;
  color-scheme: dark;
}

/* ---------- Basisstijlen ---------- */
html { font-family: var(--font-body); font-size: 100%; color: var(--color-text); background: var(--color-bg);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-size: var(--text-base); line-height: var(--leading-normal); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--color-text); margin: 0 0 0.5em; }
h1 { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--text-xl);  line-height: var(--leading-snug); letter-spacing: var(--tracking-heading); }
p  { margin: 0 0 1em; max-width: 68ch; }
a  { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--color-selection); }
table, .tabular { font-variant-numeric: tabular-nums; }  /* cijfers netjes onder elkaar */
code, pre { font-family: var(--font-mono); font-size: 0.9em; }