/* ── DNG / KHT — Color Tokens ──────────────────────────────────
   COLOUR FOLLOWS BRAND, NOT FUNCTION OR TOPIC.

   Türkis #1AFFED = DNG's IDENTITY colour — the brain-mark logo, the
     YouTube channel, video intros. EXCLUSIVE to DNG. KHT never uses it.
   Lila   #4625A1 = a SHARED secondary accent — usable by both DNG and
     KHT. Its meaning is deliberately open (no fixed topic), used for
     quieter secondary moments.
   Orange #EC8520 = the ZETTELKASTEN accent ONLY. No other context.
   KHT's default is COLOURLESS (black/white) — lila is its one
     permitted exception when it wants an accent at all.

   THIS REDESIGN dials türkis/lila down from full-bleed colour fields
   to a quiet, editorial register: Playfair Display (website/
   Denkbrief headlines), generous black/off-white space, accents used
   sparingly (hairline, link, small button) rather than large bands.

   Base (everywhere): --dng-black #1C1C1C, --dng-white #FFFDF0.
   Set the active accent with data-accent="dng" (türkis, DNG only) |
   "lila" (shared secondary) on any scope; omit for neutral black/white.

   Both ramps sit on ONE shared lightness scale, so the same step
   number means the same lightness in every family. A brand tone
   lands on the step matching its real lightness: Türkis is very
   light → step 200. Lila is dark → step 700. */

:root {
  /* Base */
  --dng-black: #1C1C1C;
  --dng-white: #FFFDF0;          /* off-white, never pure #FFF */

  /* Türkis ramp — theme "netz" (★ 200 = the brand cyan, logo/intro) */
  --cyan-100: #65FFFF;
  --cyan-200: #1AFFED;           /* ★ Marken-Türkis */
  --cyan-300: #0EE1D1;
  --cyan-400: #00BEB0;
  --cyan-500: #009489;
  --cyan-600: #00746B;           /* text on off-white — 5.5:1 */
  --cyan-700: #00534C;
  --cyan-800: #003732;
  --cyan-900: #001D1A;

  /* Lila ramp — theme "existenz" (★ 700 = the brand purple, website) */
  --purple-100: #F2F1FF;
  --purple-200: #DAD8FF;
  --purple-300: #BFBCFA;
  --purple-400: #9F9AE6;         /* text on black — 6.7:1 */
  --purple-500: #7B71CD;
  --purple-600: #604FB8;
  --purple-700: #4625A1;         /* ★ Marken-Lila — text on white 10:1 */
  --purple-800: #2F0979;
  --purple-900: #1B0052;

  /* Neutral scale — Off-White und Schwarz SIND die Enden der Skala.
     100 = --dng-white, 900 = --dng-black; 200–800 sind perzeptuell
     gleichmäßig dazwischen berechnet (Oklab), die warme Note des
     Off-White läuft dabei nach unten aus. */
  --ink-100: #FFFDF0;
  --ink-200: #DFDDD2;
  --ink-300: #C0BEB5;
  --ink-400: #A1A099;
  --ink-500: #84837D;
  --ink-600: #686763;
  --ink-700: #4D4C4A;
  --ink-800: #343332;
  --ink-900: #1C1C1C;

  /* Sub-brand & functional */
  --dng-cyan: var(--cyan-200);
  --dng-purple: var(--purple-700);
  --dng-orange: #EC8520;         /* Zettelkasten submarke accent ONLY */
  --dng-yellow: #F0C233;         /* video subtitles — functional */
  --dng-portrait-bg: #040E18;    /* dark-blue photo backdrop (KHT) */
  --zettel: var(--dng-orange);

  /* Surfaces */
  --surface-page: var(--dng-white);
  --surface-page-dark: var(--dng-black);
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--ink-100);

  /* Text */
  --text-body: var(--dng-black);
  --text-dim: var(--ink-700);
  --text-muted: var(--ink-600);
  --text-on-dark: var(--dng-white);
  --text-on-dark-dim: var(--ink-300);
  --text-on-dark-muted: var(--ink-400);

  /* Lines & borders */
  --border-on-dark: rgba(255, 253, 240, 0.14);
  --border-on-dark-strong: rgba(255, 253, 240, 0.28);
  --border-on-light: rgba(28, 28, 28, 0.12);

  /* Feedback (sober — the brand avoids loud UI colour) */
  --success: #35C08A;
  --warning: var(--dng-yellow);
  --danger: #E5544B;

  /* ── Default: NO theme colour (KHT & neutral pages) ──────────
     Accents are off-white / black. Buttons are outlined. This is the
     baseline the whole system must work in. */
  --theme: transparent;                 /* the theme colour, if any */
  --accent: var(--dng-black);            /* link/accent on LIGHT */
  --accent-on-dark: var(--dng-white);    /* link/accent on DARK */
  --hairline: var(--dng-white);          /* the thin signature rule */
  --hairline-on-light: var(--dng-black);
  --brand: transparent;                  /* primary button = outlined */
  --brand-border: currentColor;
  --brand-on: currentColor;
  --brand-hover: rgba(255, 253, 240, 0.08);
  --brand-active: rgba(255, 253, 240, 0.16);
  --focus-ring: var(--dng-white);
}

/* ── Accent: DNG — brand identity colour (exclusive to DNG) ─────
   Türkis. Screen-bright: it carries on dark grounds only. For türkis
   TEXT on off-white step down to --cyan-600. Reserve for DNG's own
   surfaces — logo, channel chrome, DNG CTAs. Never on KHT content. */
[data-accent="dng"] {
  --theme: var(--cyan-200);
  --accent: var(--cyan-600);            /* #00746B — 5.5:1 on off-white */
  --accent-on-dark: var(--cyan-200);    /* #1AFFED — brilliant on black */
  --hairline: var(--cyan-200);
  --hairline-on-light: var(--cyan-500);
  --brand: var(--cyan-200);
  --brand-border: transparent;
  --brand-on: var(--dng-black);
  --brand-hover: var(--cyan-300);
  --brand-active: var(--cyan-400);
  --focus-ring: var(--cyan-300);
}

/* ── Accent: Lila — shared secondary (DNG and KHT both may use it) ─
   A deep FILL colour: it carries on light grounds and as a surface.
   For lila TEXT on black step up to --purple-400. Meaning stays
   deliberately open — it is KHT's only permitted colour exception. */
[data-accent="lila"] {
  /* Existenzielles, Persönliches, Begleitung & Coaching. Tends toward
     KHT content but is NOT a KHT brand colour — KHT has no colour of
     its own and likely never will; lila is simply the shared accent
     these topics use, on either brand's surfaces. */
  --theme: var(--purple-700);
  --accent: var(--purple-700);          /* #4625A1 — 10:1 on off-white */
  --accent-on-dark: var(--purple-400);  /* #9F9AE6 — 6.7:1 on black */
  --hairline: var(--purple-400);
  --hairline-on-light: var(--purple-700);
  --brand: var(--purple-700);
  --brand-border: transparent;
  --brand-on: var(--dng-white);
  --brand-hover: var(--purple-600);
  --brand-active: var(--purple-800);
  --focus-ring: var(--purple-400);
}