/* Base palette. Dark is the default theme. */
:root,[data-theme="dark"]{
  --bg:#080B0A;
  --surface:#101513;
  --card:#18201D;
  --border:#232D29;
  --border-strong:#31403A;

  --text:#EAF2EE;
  --text-2:#93A39C;
  --text-3:#5F6D67;

  --brand:#00E599;
  --brand-hover:#33EBAD;
  --brand-active:#00C282;
  --on-brand:#06231A;
  --brand-twin:#00785A;

  --positive:#5BFF6B;
  --warning:#F2B441;
  --problem:#FF5C7A;

  --positive-tint:rgb(91 255 107 / .14);
  --warning-tint:rgb(242 180 65 / .14);
  --problem-tint:rgb(255 92 122 / .14);

  --disabled-bg:#1E2825;
  --disabled-text:#5F6D67;

  --chart-1:#00E599;
  --chart-2:rgb(234 242 238 / .45);
  --chart-3:rgb(234 242 238 / .20);
}

/* Light palette: same variable names, different values. --brand loses all
   text duties to --brand-twin because #00E599 on white reaches only 1.5:1. */
[data-theme="light"]{
  --bg:#FBFDFC;
  --surface:#F2F6F4;
  --card:#FFFFFF;
  --border:#DEE6E2;
  --border-strong:#C3CFC9;

  --text:#0C1210;
  --text-2:#4A5854;
  --text-3:#77857F;

  --brand:#00785A;
  --brand-hover:#00694F;
  --brand-active:#005741;
  --on-brand:#FFFFFF;
  --brand-twin:#00785A;

  --positive:#1E7A28;
  --warning:#8A5A00;
  --problem:#C1214A;

  --positive-tint:rgb(30 122 40 / .10);
  --warning-tint:rgb(138 90 0 / .10);
  --problem-tint:rgb(193 33 74 / .10);

  --disabled-bg:#E7EDEA;
  --disabled-text:#9AA7A2;

  --chart-1:#00785A;
  --chart-2:rgb(12 18 16 / .45);
  --chart-3:rgb(12 18 16 / .20);
}