/* ============================================================
   Notioneers Brand-Tokens (brand.json v3.1, 2026-08-01)
   Quelle: https://brand.notioneers.net/brand.json
   ============================================================ */

@font-face { font-family: 'TWK Lausanne'; src: url('../fonts/TWKLausanne-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'TWK Lausanne'; src: url('../fonts/TWKLausanne-300Italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'TWK Lausanne'; src: url('../fonts/TWKLausanne-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TWK Lausanne'; src: url('../fonts/TWKLausanne-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Greens */
  --color-ease-alt: #E1FFE3;
  --color-ease:  #A0F5AE;
  --color-bloom: #71F08D;
  --color-pulse: #07DC5B;
  --color-depth: #00340D;
  --color-shade: #0B1E0F;
  --color-depth-active: #07140A;

  /* Neutrals */
  --color-halo:  #F2F4F2;
  --color-mist:  #DEECDC;
  --color-veil:  #D1E2D1;
  --color-sage:  #AFCAAF;
  --color-stone: #5E6B5F;
  --color-root:  #405143;
  --color-white: #FFFFFF;

  /* Complementary (light / base / text) */
  --color-aeris-light: #C1E2F1; --color-aeris-base: #92D6F3; --color-aeris-text: #0F5C75;
  --color-nimbus-light: #DAD8FF; --color-nimbus-base: #928EFF; --color-nimbus-text: #3938C2;
  --color-muse-light: #F0D8FF; --color-muse-base: #D7A0F0; --color-muse-text: #6A0DA5;
  --color-coral-light: #FFD2D2; --color-coral-base: #E8A7A9; --color-coral-text: #8E1A14;
  --color-solea-light: #FFF4D0; --color-solea-base: #FDE49A; --color-solea-text: #8C6A04;
  --color-cove-light: #F5DBCB; --color-cove-base: #F0B99C; --color-cove-text: #7A2C08;

  /* Semantic */
  --bg-page: var(--color-halo);
  --bg-surface: var(--color-white);
  --bg-muted: var(--color-mist);
  --fg: var(--color-depth);
  --fg-secondary: var(--color-stone);
  --fg-tertiary: var(--color-root);
  --border: var(--color-veil);
  --border-strong: var(--color-sage);

  /* Typography */
  --font-sans: 'TWK Lausanne', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Layout */
  --w-narrow: 40rem;
  --w-wide: 46rem;
  --gutter: clamp(16px, 4vw, 32px);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows (neutral) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 18, 0.05);
  --shadow-sm: 0 2px 8px rgba(15, 23, 18, 0.07);
  --shadow-md: 0 6px 20px rgba(15, 23, 18, 0.10);
  --shadow-focus: 0 0 0 4px rgba(0, 52, 13, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Stufenfarben: Potenzial statt Defizit → warm, nicht alarmierend */
[data-level="potenzial"] { --level-light: var(--color-cove-light); --level-text: var(--color-cove-text); --level-bar: var(--color-cove-base); }
[data-level="weg"]       { --level-light: var(--color-solea-light); --level-text: var(--color-solea-text); --level-bar: var(--color-solea-base); }
[data-level="stark"]     { --level-light: var(--color-ease); --level-text: var(--color-depth); --level-bar: var(--color-pulse); }

/* Bereichsfarben (Serie von drei → Komplementärfarben laut Brand) */
[data-area="wissen"]   { --area-light: var(--color-aeris-light); --area-base: var(--color-aeris-base); --area-text: var(--color-aeris-text); }
[data-area="prozesse"] { --area-light: var(--color-nimbus-light); --area-base: var(--color-nimbus-base); --area-text: var(--color-nimbus-text); }
[data-area="ki"]       { --area-light: var(--color-muse-light); --area-base: var(--color-muse-base); --area-text: var(--color-muse-text); }