/* ============================================================
   [DEINE MARKE] — Design Tokens  (single source of truth)
   v1 · 2026-09-12 · reconciles print concept + online V2 draft
   Import this in the online app; print/marketing use the SAME hex.
   Do not hardcode colours anywhere else — reference these vars.
   ============================================================ */
:root {
  /* --- Surfaces --- */
  --cream:        #FBF6E9;  /* page background */
  --paper:        #FFFDF7;  /* cards / panels */
  --sage-surface: #E6EDDF;  /* soft green panel (callouts, invites) */
  --sage-tint:    #DFEAD8;  /* lightest green wash */

  /* --- Brand core --- */
  --teal:         #246F65;  /* PRIMARY brand */
  --teal-ink:     #244C48;  /* deep teal = primary text */
  --teal-soft:    #7EA99C;  /* borders/lines over light */
  --clay:         #B84E28;  /* ACCENT / call-to-action / emphasis */
  --clay-deep:    #9C4D24;  /* clay hover/pressed */
  --clay-bright:  #DA6A2E;  /* mascot fur (Filu) */
  --sun:          #E8A93A;  /* highlight — the "GROSS" word, size facts */
  --green-mid:    #8FB06B;  /* optional nature accent (sparingly) */

  /* --- Text & lines --- */
  --ink:          #244C48;  /* = teal-ink; default body text */
  --ink-muted:    #52665D;  /* secondary text, hints */
  --line:         #D9DFD0;  /* hairlines, card borders */
  --focus:        #B84E28;  /* focus ring (a11y) */

  /* --- Map treatment (real Equal-Earth base) --- */
  --map-wash:       #E8A93A; /* warm overlay colour */
  --map-wash-op:    0.13;    /* overlay opacity, mix-blend: soft-light */
  --map-label:      #244C48; /* continent labels, +white halo */
  --map-ocean:      #2B5E78; /* ocean labels, italic */
  /* image filter recipe: saturate(1.2) contrast(1.03) brightness(1.03) */

  /* --- Typography --- */
  --font-display: "Fredoka", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  /* Self-HOST these faces (no external CDN) for GDPR + offline; fallback stack matches metrics. */

  /* --- Radii --- */
  --r-pill:  30px;
  --r-card:  24px;
  --r-badge: 16px;
  --r-chip:  12px;

  /* --- Spacing scale (px) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* --- Shadows --- */
  --shadow-card:  0 14px 0 -7px #DFE6D8;              /* chunky friendly lift */
  --shadow-float: 0 6px 14px rgba(36,76,72,.18);      /* badges, mascot */
}