/* Solarpunk NOW — Color System
   FLAT BLACK ON WHITE is the base of everything. White is the main background;
   near-black ink is the text. On top sit exactly THREE brand accents — one
   green, one yellow, one pink — used as clear color-coding for the World-hub
   areas, applied as ORIENTATION (not dogmatically). No warm cream, no stone
   beige, no cool gray, no deep blue. */
:root {
  /* ---- Brand accents (the three fixed leitfarben) ---- */
  --spn-pink: #F40470;   /* Infinity Tools */
  --spn-yellow: #FEBF01; /* Play2Grow · Learning Journeys */
  --spn-green: #00826A;  /* Nature · Permaculture · Garden School */

  /* Accent tints (soft single-hue washes — single hue only, never mixed) */
  --spn-pink-tint: #FDE4EF;
  --spn-yellow-tint: #FFF4D2;
  --spn-green-tint: #D8ECE6;

  /* Accent shades (text-on-tint / pressed states) */
  --spn-pink-deep: #C40058;
  --spn-yellow-deep: #B98900;
  --spn-green-deep: #00614F;

  /* ---- Ink & Paper — flat black on white ---- */
  --spn-ink: #111111;        /* text — flat near-black */
  --spn-ink-soft: #3D3D3A;   /* softer ink for large display headings */
  --spn-black: var(--spn-ink); /* back-compat alias */
  --spn-white: #FFFFFF;

  --spn-paper: #FFFFFF;       /* card surface — white */
  --spn-paper-raised: #FFFFFF;/* raised sheet / inputs — white */
  --spn-paper-warm: #FAF9F6;  /* optional soft off-white secondary surface */
  --spn-paper-edge: #F2F1EE;  /* faint off-white for layered panels */

  --spn-table: #FFFFFF;       /* page ground — white is the main focus */
  --spn-table-deep: #F4F3F0;  /* faint sunk well / alternate row */

  --spn-stone: #565654;       /* secondary text — neutral gray */
  --spn-stone-soft: #8A8A88;  /* muted / disabled / meta */
  --spn-hairline: #E7E6E2;    /* hairline divider (used sparingly) */

  /* ---- Semantic aliases ---- */
  --text-primary: var(--spn-ink);
  --text-secondary: var(--spn-stone);
  --text-muted: var(--spn-stone-soft);
  --text-inverse: var(--spn-white);

  --surface-page: var(--spn-table);     /* white page */
  --surface-card: var(--spn-paper);     /* white card */
  --surface-raised: var(--spn-paper-raised);
  --surface-sunk: var(--spn-table-deep);
  --surface-ink: var(--spn-ink);

  --border-hairline: var(--spn-hairline);

  /* Page background — plain white. The focus stays on white. */
  --bg-table: var(--spn-white);

  /* Default brand accent (overridden per area via [data-world]) */
  --accent: var(--spn-pink);
  --accent-tint: var(--spn-pink-tint);
  --accent-deep: var(--spn-pink-deep);
  --on-accent: var(--spn-white);

  /* Feedback */
  --success: var(--spn-green);
  --warning: var(--spn-yellow);
  --danger: var(--spn-pink);
}

/* ---- Area scopes ---- set data-world on any container to retheme --accent.
   Primary names are the World-hub areas; the shop sub-brand names are kept as
   aliases so the webshop UI kit keeps working. ---- */
[data-world="tools"],  [data-world="stonepaper"] { --accent: var(--spn-pink);   --accent-tint: var(--spn-pink-tint);   --accent-deep: var(--spn-pink-deep);   --on-accent: #fff; }
[data-world="play"],   [data-world="beenius"]    { --accent: var(--spn-yellow); --accent-tint: var(--spn-yellow-tint); --accent-deep: var(--spn-yellow-deep); --on-accent: var(--spn-ink); }
[data-world="nature"], [data-world="permakultur"]{ --accent: var(--spn-green);  --accent-tint: var(--spn-green-tint);  --accent-deep: var(--spn-green-deep);  --on-accent: #fff; }