/* ============================================================
   Digidoktor - Color tokens
   Brand: deep pine teal + mint, on warm-clean neutrals.
   Base scales first, then semantic aliases.
   ============================================================ */

:root {
  /* ---- Pine (brand green) - calm, clinical, trustworthy ---- */
  --pine-50:  #eaf1f1;
  --pine-100: #d2e2e2;
  --pine-200: #a6c4c6;
  --pine-300: #6f9a9d;
  --pine-400: #3d7175;
  --pine-500: #134347; /* ◀ brand primary (logo tile bg) */
  --pine-600: #103a3d;
  --pine-700: #0d2f32;
  --pine-800: #0a2528;
  --pine-900: #071a1c;

  /* ---- Mint (accent) - fresh, optimistic, progress ---- */
  --mint-50:  #f0fcf6;
  --mint-100: #def9ea;
  --mint-200: #c9f6de;
  --mint-300: #b3f5d2; /* ◀ brand accent (logo "D") */
  --mint-400: #8fe9bc;
  --mint-500: #5fd79e;
  --mint-600: #38bc80;
  --mint-700: #2a9665;
  --mint-800: #1f6f4c;

  /* ---- Neutrals - warm-cool, a hair green-tinted to harmonize ---- */
  --ink:       #0e1412; /* near-black for headlines */
  --slate-900: #16201d;
  --slate-800: #232f2c;
  --slate-700: #3a4744;
  --slate-600: #4f5d59;
  --slate-500: #677571; /* muted text */
  --slate-400: #8a9793;
  --slate-300: #c2ccc9; /* default border */
  --slate-200: #dce3e1;
  --slate-100: #edf1ef;
  --paper:     #f6f8f6; /* page background */
  --white:     #ffffff;

  /* ---- Semantic hues ---- */
  --success:    #2a9665;
  --success-bg: #def9ea;
  --warning:    #b97e0e;
  --warning-bg: #fbf1dc;
  --danger:     #bf403a;
  --danger-bg:  #fbe9e8;
  --info:       #3d7175;
  --info-bg:    #eaf1f1;

  /* ============================================================
     Semantic aliases - reference these in components/UI, not raw scale
     ============================================================ */

  /* Surfaces & background */
  --bg-page:         var(--paper);
  --surface:         var(--white);
  --surface-subtle:  var(--slate-100);
  --surface-sunken:  var(--slate-200);
  --surface-inverse: var(--pine-500);
  --surface-brand:   var(--pine-500);
  --surface-accent:  var(--mint-300);

  /* Text */
  --text-strong:  var(--ink);
  --text-body:    var(--slate-900);
  --text-muted:   var(--slate-500);
  --text-subtle:  var(--slate-400);
  --text-on-dark: var(--white);
  --text-accent-on-dark: var(--mint-300);
  --text-link:    var(--pine-500);

  /* Borders & lines */
  --border:        var(--slate-300);
  --border-subtle: var(--slate-200);
  --border-strong: var(--slate-400);
  --border-brand:  var(--pine-500);

  /* Interactive / brand */
  --brand:           var(--pine-500);
  --brand-hover:     var(--pine-600);
  --brand-active:    var(--pine-700);
  --accent:          var(--mint-300);
  --accent-strong:   var(--mint-600);
  --on-brand:        var(--white);
  --on-accent:       var(--pine-700);
  --focus-ring:      var(--pine-400);

  /* Data viz / progress (weight, calories, streaks) */
  --data-weight:   var(--pine-500);
  --data-progress: var(--mint-600);
  --data-track:    var(--slate-200);
}