/**
 * MEDILESS DESIGN TOKENS - CSS Layer
 * 
 * Token Bridge for PUBLIC website (Landing Page, Fachkreise, etc.)
 * Source of Truth: src/design-system/tokens.cjs
 * 
 * IMPORTANT: These values are manually synced from tokens.cjs
 * When tokens.cjs changes, update this file accordingly.
 * 
 * Last synced: 2025-12-14
 */

:root {
  /* ==================
     BACKGROUNDS
     ================== */
  --mediless-bg: #FAFEFB;              /* mediless-bg-ultra-light */
  --mediless-surface: #FFFFFF;         /* Clean white for cards/surfaces */
  
  /* ==================
     TEXT COLORS
     ================== */
  --mediless-text-head: #1B2A36;       /* mediless-text-primary (Headlines) */
  --mediless-text-body: #5E6A71;       /* mediless-text-secondary (Body text) */
  --mediless-text-muted: #94A3B8;      /* mediless-text-tertiary (Muted text) */
  
  /* ==================
     BRAND COLORS
     ================== */
  --mediless-primary: #2FB585;         /* Main brand green */
  --mediless-primary-hover: #1B9C6E;   /* mediless-primary-dark (Hover state) */
  
  /* ==================
     BORDERS & DIVIDERS
     ================== */
  --mediless-border-soft: #E9ECEF;     /* mediless-border-light (Subtle borders) */
  
  /* ==================
     SHADOWS
     ================== */
  --mediless-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.04);  /* mediless-card shadow */
}

/**
 * TOKEN MAPPING REFERENCE:
 * 
 * CSS Variable              → Design Token (tokens.cjs)
 * --------------------------------------------------------
 * --mediless-bg              → mediless-bg-ultra-light (#FAFEFB)
 * --mediless-surface         → Pure white (#FFFFFF)
 * --mediless-text-head       → mediless-text-primary (#1B2A36)
 * --mediless-text-body       → mediless-text-secondary (#5E6A71)
 * --mediless-text-muted      → mediless-text-tertiary (#94A3B8)
 * --mediless-primary         → mediless-primary (#2FB585)
 * --mediless-primary-hover   → mediless-primary-dark (#1B9C6E)
 * --mediless-border-soft     → mediless-border-light (#E9ECEF)
 * --mediless-shadow-soft     → mediless-card (0 2px 8px rgba(0, 0, 0, 0.04))
 */