:root {
  /* Dark Theme */
  --tn-dark-01: #f7768e;
  --tn-dark-02: #ff9e64;
  --tn-dark-03: #e0af68;
  --tn-dark-04: #9ece6a;
  --tn-dark-05: #73daca;
  --tn-dark-06: #b4f9f8;
  --tn-dark-07: #2ac3de;
  --tn-dark-08: #7dcfff;
  --tn-dark-09: #7aa2f7;
  --tn-dark-10: #bb9af7;
  --tn-dark-11: #c0caf5;
  --tn-dark-12: #a9b1d6;
  --tn-dark-13: #9aa5ce;
  --tn-dark-14: #cfc9c2;
  --tn-dark-15: #565f89;
  --tn-dark-16: #414868;
  --tn-dark-17: #24283b;
  --tn-dark-18: #1a1b26;
  --tn-dark-filter-01: invert(67%) sepia(81%) saturate(2461%) hue-rotate(306deg) brightness(102%) contrast(94%);
  --tn-dark-filter-02: invert(89%) sepia(27%) saturate(6632%) hue-rotate(317deg) brightness(107%) contrast(101%);
  --tn-dark-filter-03: invert(75%) sepia(29%) saturate(664%) hue-rotate(353deg) brightness(93%) contrast(88%);
  --tn-dark-filter-04: invert(84%) sepia(24%) saturate(802%) hue-rotate(38deg) brightness(91%) contrast(85%);
  --tn-dark-filter-05: invert(78%) sepia(48%) saturate(333%) hue-rotate(118deg) brightness(93%) contrast(91%);
  --tn-dark-filter-06: invert(86%) sepia(15%) saturate(513%) hue-rotate(130deg) brightness(101%) contrast(104%);
  --tn-dark-filter-07: invert(65%) sepia(54%) saturate(670%) hue-rotate(143deg) brightness(95%) contrast(83%);
  --tn-dark-filter-08: invert(71%) sepia(55%) saturate(771%) hue-rotate(177deg) brightness(106%) contrast(101%);
  --tn-dark-filter-09: invert(61%) sepia(12%) saturate(1879%) hue-rotate(184deg) brightness(102%) contrast(94%);
  --tn-dark-filter-10: invert(78%) sepia(35%) saturate(4827%) hue-rotate(207deg) brightness(101%) contrast(94%);
  --tn-dark-filter-11: invert(79%) sepia(11%) saturate(1033%) hue-rotate(195deg) brightness(103%) contrast(92%);
  --tn-dark-filter-12: invert(79%) sepia(20%) saturate(404%) hue-rotate(193deg) brightness(87%) contrast(92%);
  --tn-dark-filter-13: invert(78%) sepia(9%) saturate(1774%) hue-rotate(194deg) brightness(87%) contrast(83%);
  --tn-dark-filter-14: invert(88%) sepia(13%) saturate(136%) hue-rotate(352deg) brightness(94%) contrast(83%);
  --tn-dark-filter-15: invert(38%) sepia(9%) saturate(1910%) hue-rotate(192deg) brightness(94%) contrast(87%);
  --tn-dark-filter-16: invert(25%) sepia(12%) saturate(1580%) hue-rotate(192deg) brightness(99%) contrast(86%);
  --tn-dark-filter-17: invert(12%) sepia(8%) saturate(2849%) hue-rotate(192deg) brightness(96%) contrast(89%);
  --tn-dark-filter-18: invert(7%) sepia(27%) saturate(776%) hue-rotate(197deg) brightness(95%) contrast(92%);

  /* Light Theme */
  --tn-light-01: #8c4351;
  --tn-light-02: #965027;
  --tn-light-03: #8f5e15;
  --tn-light-04: #485e30;
  --tn-light-05: #33635c;
  --tn-light-06: #166775;
  --tn-light-07: #0f4b6e;
  --tn-light-08: #34548a;
  --tn-light-09: #5a4a78;
  --tn-light-10: #343b58;
  --tn-light-11: #565a6e;
  --tn-light-12: #634f30;
  --tn-light-13: #0f0f14;
  --tn-light-14: #9699a3;
  --tn-light-15: #d5d6db;
  --tn-light-filter-01: invert(30%) sepia(13%) saturate(2258%) hue-rotate(299deg) brightness(94%) contrast(83%);
  --tn-light-filter-02: invert(33%) sepia(15%) saturate(2400%) hue-rotate(338deg) brightness(99%) contrast(86%);
  --tn-light-filter-03: invert(34%) sepia(27%) saturate(2987%) hue-rotate(15deg) brightness(92%) contrast(84%);
  --tn-light-filter-04: invert(32%) sepia(10%) saturate(2061%) hue-rotate(46deg) brightness(91%) contrast(83%);
  --tn-light-filter-05: invert(32%) sepia(51%) saturate(367%) hue-rotate(122deg) brightness(91%) contrast(88%);
  --tn-light-filter-06: invert(28%) sepia(100%) saturate(369%) hue-rotate(141deg) brightness(95%) contrast(92%);
  --tn-light-filter-07: invert(17%) sepia(95%) saturate(1240%) hue-rotate(178deg) brightness(96%) contrast(88%);
  --tn-light-filter-08: invert(27%) sepia(58%) saturate(655%) hue-rotate(179deg) brightness(93%) contrast(84%);
  --tn-light-filter-09: invert(28%) sepia(11%) saturate(2096%) hue-rotate(219deg) brightness(96%) contrast(82%);
  --tn-light-filter-10: invert(23%) sepia(11%) saturate(1791%) hue-rotate(191deg) brightness(88%) contrast(92%);
  --tn-light-filter-11: invert(36%) sepia(7%) saturate(1186%) hue-rotate(193deg) brightness(92%) contrast(89%);
  --tn-light-filter-12: invert(29%) sepia(53%) saturate(348%) hue-rotate(357deg) brightness(96%) contrast(94%);
  --tn-light-filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) brightness(93%) contrast(94%);
  --tn-light-filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate(189deg) brightness(92%) contrast(87%);
  --tn-light-filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) brightness(92%) contrast(90%);
}

/* semantic color variables for this project */
:root {
  color-scheme: dark;
  --color-bg: var(--tn-dark-18);
  --color-bg-01: #28293A;
  --color-fg: var(--tn-dark-12);
  --color-black: var(--tn-dark-16);
  --color-white: var(--tn-dark-11);
  --color-red: var(--tn-dark-01);
  --color-green: var(--tn-dark-05);
  --color-blue: var(--tn-dark-09);
  --color-yellow: var(--tn-dark-03);
  --color-cyan: var(--tn-dark-08);
  --color-magenta: var(--tn-dark-10);
  --color-links: var(--color-green);
  --color-error: var(--color-red);
  --color-success: var(--tn-dark-04);
  --color-warn: var(--color-yellow);
  --color-headings: var(--color-cyan);
  --filter-black: var(--tn-dark-filter-16);
  --filter-white: var(--tn-dark-filter-11);
  --filter-red: var(--tn-dark-filter-01);
  --filter-green: var(--tn-dark-filter-05);
  --filter-blue: var(--tn-dark-filter-09);
  --filter-yellow: var(--tn-dark-filter-03);
  --filter-cyan: var(--tn-dark-filter-08);
  --filter-magenta: var(--tn-dark-filter-10);
  --filter-fg: var(--tn-dark-filter-12);
  --filter-bg: var(--tn-dark-filter-18);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --color-bg: var(--tn-light-15);
    --color-bg-01: #C5C6CE;
    --color-fg: var(--tn-light-10);
    --color-black: var(--tn-light-13);
    --color-white: var(--tn-light-10);
    --color-red: var(--tn-light-01);
    --color-green: var(--tn-light-05);
    --color-blue: var(--tn-light-08);
    --color-yellow: var(--tn-light-03);
    --color-cyan: var(--tn-light-07);
    --color-magenta: var(--tn-light-09);
    --color-links: var(--color-green);
    --color-error: var(--color-red);
    --color-success: var(--tn-light-04);
    --color-warn: var(--color-yellow);
    --color-headings: var(--color-cyan);
    --filter-black: var(--tn-light-filter-13);
    --filter-white: var(--tn-light-filter-10);
    --filter-red: var(--tn-light-filter-01);
    --filter-green: var(--tn-light-filter-05);
    --filter-blue: var(--tn-light-filter-08);
    --filter-yellow: var(--tn-light-filter-03);
    --filter-cyan: var(--tn-light-filter-07);
    --filter-magenta: var(--tn-light-filter-09);
    --filter-fg: var(--tn-light-filter-10);
    --filter-bg: var(--tn-light-filter-15);
  }
}