:root {
  --palette-black: #000000;
  --palette-white: #ffffff;
  --palette-lime: #c0ff00;
  --palette-danger: #ff0060;
  --palette-black-08: #00000014;
  --palette-black-18: #0000002e;
  --palette-black-26: #00000042;
  --palette-black-33: #00000054;
  --palette-black-44: #00000070;
  --palette-black-80: #000000cc;
  --palette-white-06: #ffffff0f;
  --palette-white-08: #ffffff14;
  --palette-white-12: #ffffff1f;
  --palette-white-18: #ffffff2e;
  --palette-white-26: #ffffff42;
  --palette-white-33: #ffffff54;
  --palette-white-44: #ffffff70;
  --palette-white-80: #ffffffcc;
  --palette-lime-08: #c0ff0014;
  --palette-lime-44: #c0ff0070;
  --ui-bg: var(--palette-black);
  --ui-fg: var(--palette-white);
  --ui-muted: var(--palette-white-80);
  --ui-border: var(--palette-white-18);
  --ui-subtle: var(--palette-white-12);
  --ui-tint: var(--palette-white-06);
  --ui-border-strong: var(--palette-white);
  --ui-card-hover: var(--palette-white);
  --ui-card-hover-text: var(--palette-black);
  --footer-bg: var(--palette-white);
  --footer-fg: var(--palette-black);
  --footer-muted: var(--palette-black-80);
  --footer-border: var(--palette-black-18);
  --footer-logo-filter: brightness(0);
}

:root[data-kmna-mode="light"] {
  --ui-bg: var(--palette-white);
  --ui-fg: var(--palette-black);
  --ui-muted: var(--palette-black-80);
  --ui-border: var(--palette-black-18);
  --ui-subtle: var(--palette-black-08);
  --ui-tint: var(--palette-black-08);
  --ui-border-strong: var(--palette-black);
  --ui-card-hover: var(--palette-black);
  --ui-card-hover-text: var(--palette-white);
  --footer-bg: var(--palette-black);
  --footer-fg: var(--palette-white);
  --footer-muted: var(--palette-white-80);
  --footer-border: var(--palette-white-18);
  --footer-logo-filter: none;
}