/* OCA Team Dashboard: Design Tokens
   Light mode is the default (:root). Dark mode activated via html[data-theme="dark"].
*/

:root,
html[data-theme="light"] {
  --bg:                #F4F1E9;
  --surface-0:         #FFFFFF;
  --surface-1:         #F2EEE3;
  --surface-2:         #FAF7F2;
  --surface-3:         #FFFFFF;
  --hover:             rgba(40,48,68,.04);
  --hover-strong:      rgba(40,48,68,.07);
  --border:            #E8E2D2;
  --border-strong:     #D9D2BF;
  --ink-1:             #1A1F26;
  --ink-2:             #5C6068;
  --ink-3:             #8A8576;
  --ink-inv:           #FAF7F2;
  --teal:              #17A398;
  --teal-soft:         #E1F3F0;
  --coral:             #EF7B45;
  --coral-soft:        #FBE5D7;
  --navy:              #283044;
  --red:               #9F0A37;
  --separator:         rgba(159, 10, 55, .22);
  --separator-strong:  rgba(159, 10, 55, .40);
  --shadow-card:       0 1px 2px rgba(40,48,68,.04), 0 0 0 1px rgba(40,48,68,.04);
  --shadow-pop:        0 12px 32px rgba(40,48,68,.14), 0 0 0 1px rgba(40,48,68,.06);
  --tooltip-bg:        #1A1F26;
  --tooltip-fg:        #FAF7F2;
  --scrollbar:         rgba(40,48,68,.18);
}

html[data-theme="dark"] {
  --bg:                #0F1318;
  --surface-0:         #161A21;
  --surface-1:         #1A1F27;
  --surface-2:         #1E232C;
  --surface-3:         #252B36;
  --hover:             rgba(255,255,255,.04);
  --hover-strong:      rgba(255,255,255,.07);
  --border:            rgba(255,255,255,.07);
  --border-strong:     rgba(255,255,255,.13);
  --ink-1:             #EDE9DE;
  --ink-2:             #A8A39A;
  --ink-3:             #6E6A62;
  --ink-inv:           #15191F;
  --teal:              #22BFB1;
  --teal-soft:         rgba(34,191,177,.14);
  --coral:             #F08B5C;
  --coral-soft:        rgba(240,139,92,.18);
  --navy:              #283044;
  --red:               #C5485F;
  --separator:         rgba(197, 72, 95, .42);
  --separator-strong:  rgba(197, 72, 95, .65);
  --shadow-card:       0 1px 2px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.05);
  --shadow-pop:        0 12px 32px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.06);
  --tooltip-bg:        #EDE9DE;
  --tooltip-fg:        #15191F;
  --scrollbar:         rgba(255,255,255,.12);
}