/* ============================================================
   Todoist — Color Tokens
   Base values + semantic aliases. Built around Todoist red,
   warm neutrals, the 4-level priority system and task labels.
   ============================================================ */

:root {
  /* ---- Brand red (Todoist's signature) ---- */
  --td-red-50:  #FDECEA;
  --td-red-100: #FAD4CF;
  --td-red-300: #F08A7E;
  --td-red:     #E44332;  /* primary brand / CTA */
  --td-red-600: #D32B1C;  /* hover */
  --td-red-700: #B91F12;  /* active / pressed */

  /* ---- Warm ink (text) — Todoist text is a warm near-black ---- */
  --warm-900: #202020;  /* primary text */
  --warm-800: #353535;
  --warm-700: #555555;  /* secondary text */
  --warm-600: #707070;  /* tertiary / meta text */
  --warm-500: #808080;  /* muted / placeholder */
  --warm-400: #A0A0A0;

  /* ---- Warm neutrals (surfaces & lines) ---- */
  --cream:      #FCFAF8;  /* marketing / sidebar background */
  --paper:      #FFFFFF;  /* app canvas */
  --sand-50:    #F7F5F3;  /* hover row / subtle fill */
  --sand-100:   #F0EEEC;  /* pressed row */
  --line:       #EBEBEB;  /* default border */
  --line-strong:#DEDEDE;  /* stronger divider */

  /* ---- Priority colors (the heart of Todoist) ---- */
  --priority-1: #D1453B;  /* P1 — red, urgent */
  --priority-2: #EB8909;  /* P2 — orange */
  --priority-3: #246FE0;  /* P3 — blue */
  --priority-4: #808080;  /* P4 — default / none */

  /* ---- Semantic status ---- */
  --success: #058527;  /* completed / added */
  --success-bg: #E8F5EC;
  --warning: #EB8909;
  --danger:  #D1453B;
  --info:    #246FE0;

  /* ---- Marketing section tints (soft, warm/cool washes) ---- */
  --tint-red:   #FBEAE7;
  --tint-blue:  #E9F1FB;
  --tint-green: #EDF5E6;
  --tint-amber: #FBF0DC;
  --tint-sand:  #F4F0EB;

  /* ---- Task label palette (Todoist color labels) ---- */
  --label-berry-red: #B8255F;
  --label-red:       #DB4035;
  --label-orange:    #FF9933;
  --label-yellow:    #FAD000;
  --label-olive:     #AFB83B;
  --label-lime:      #7ECC49;
  --label-green:     #299438;
  --label-mint:      #6ACCBC;
  --label-teal:      #158FAD;
  --label-sky:       #14AAF5;
  --label-blue:      #4073FF;
  --label-grape:     #884DFF;
  --label-violet:    #AF38EB;
  --label-lavender:  #EB96EB;
  --label-magenta:   #E05194;
  --label-salmon:    #FF8D85;
  --label-charcoal:  #808080;
  --label-taupe:     #CCAC93;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-brand:            var(--td-red);
  --color-brand-hover:      var(--td-red-600);
  --color-brand-active:     var(--td-red-700);

  --text-primary:           var(--warm-900);
  --text-secondary:         var(--warm-700);
  --text-tertiary:          var(--warm-600);
  --text-muted:             var(--warm-500);
  --text-on-brand:          #FFFFFF;
  --text-link:              var(--td-red);

  --surface-canvas:         var(--paper);
  --surface-sidebar:        var(--cream);
  --surface-card:           var(--paper);
  --surface-hover:          var(--sand-50);
  --surface-active:         var(--sand-100);
  --surface-overlay:        rgba(32, 32, 32, 0.45);

  --border-default:         var(--line);
  --border-strong:          var(--line-strong);
  --border-focus:           var(--td-red);

  --focus-ring:             rgba(228, 67, 50, 0.30);
}