/* ============================================================
   tokens.css — Single source of truth for all design tokens
   Mentala Design System
   Load order: tokens.css -> base.css -> mentala.css
   ============================================================ */

:root {

  /* ---- Background & Surface -------------------------------- */
  --bg:              #F1F0EA;
  --surface:         #E5E6DE;
  --surface-alt:     #EDEBE3;
  --surface-muted:   #EDEBE3;   /* used in base.css hover/active states */
  --input-bg:        #F8F8F3;

  /* ---- Border ---------------------------------------------- */
  --border:          #CFD1C6;
  --border-strong:   #B5BEA5;

  /* ---- Icon ------------------------------------------------- */
  --icon-bg:         #DCDFD2;

  /* ---- Accent ----------------------------------------------- */
  --accent:          #C9B69A;
  --accent-dark:     #8A7658;
  --accent-soft:     #E8D5C2;   /* soft warm tint, e.g. pill.accent */
  --taupe-soft:      #EBD1BE;   /* legacy warm pill, pill-taupe */

  /* ---- Primary ---------------------------------------------- */
  --primary:         #6B8068;
  --primary-hover:   #576B55;
  --primary-active:  #4A5E49;
  --primary-dark:    #2F3A2C;
  --primary-subtle:  #E2E8DF;   /* light sage tint for active/selected states */

  /* ---- Text ------------------------------------------------- */
  --text:            #2F3A2C;
  --text-muted:      #5A6756;
  --text-secondary:  #5A6756;   /* alias for --text-muted; resolves undefined-token bug */
  --text-placeholder:#9BA598;

  /* ---- Semantic: Danger / Success / Warning ---------------- */
  --danger:          #8B3A3A;
  --danger-bg:       #F5E4E4;
  --success:         #4A7A3F;
  --success-bg:      #E5EDDF;
  --warning-bg:      #fff8e1;
  --warning-border:  #d4a017;

  /* ---- Semantic: Status badges ----------------------------- */
  --status-green-bg:   #D8E8D6;
  --status-green-text: #2F5C2A;

  /* ---- Surface Invert (dunkle Sage-Fläche für CTA-Blöcke) -- */
  --surface-invert:       #2F3A2C;          /* identisch mit --text / --primary-dark */
  --text-on-invert:       #F1F0EA;          /* identisch mit --bg */
  --text-on-invert-muted: rgba(241,240,234,0.68);

  /* ---- Overlay & Focus -------------------------------------- */
  --overlay-bg:      rgba(47, 58, 44, 0.72);
  --focus-ring:      rgba(107, 128, 104, 0.22);

  /* ---- Shadows ---------------------------------------------- */
  --shadow-sm:       0 2px 12px rgba(47, 58, 44, 0.08);
  --shadow-md:       0 8px 28px rgba(47, 58, 44, 0.13);
  --shadow-btn:      0 2px 12px rgba(47, 58, 44, 0.14);

  /* ---- Typography ------------------------------------------- */
  --font-serif:      'DM Serif Display', Georgia, serif;
  --font-sans:       'DM Sans', system-ui, sans-serif;

  /* ---- Border Radius --------------------------------------- */
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       14px;
  --radius-xl:       16px;
  --radius-pill:     999px;
}