:root {
  /* Base and derived colors are now referenced from the computed scale */
  --color-01-primary:           var(--color-01-50);
  --color-01-primary-contrast:  var(--color-01-99);
  --color-01-primary-dark-1:    var(--color-01-48);
  --color-01-primary-dark-2:    var(--color-01-47);
  --color-01-primary-dark-3:    var(--color-01-46);
  --color-01-primary-dark-4:    var(--color-01-45);
  --color-01-primary-dark-5:    var(--color-01-44);
  --color-01-primary-dark-6:    var(--color-01-43);
  --color-01-primary-dark-7:    var(--color-01-42);
  --color-01-primary-light-1:   var(--color-01-52);
  --color-01-primary-light-2:   var(--color-01-53);
  --color-01-primary-light-3:   var(--color-01-54);
  --color-01-primary-light-4:   var(--color-01-55);
  --color-01-primary-light-5:   var(--color-01-57);
  --color-01-primary-light-6:   var(--color-01-59);
  --color-01-primary-light-7:   var(--color-01-61);

  /* Alpha variants reference the base RGB variable */
{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set alpha = i * 10 %}
  --color-01-primary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-50), 0.{{ alpha }});
{% endfor %}

  --color-01-primary-hover:     var(--color-01-primary-dark-1);
  --color-01-primary-active:    var(--color-01-primary-dark-2);

  /* Secondary colors */
  --color-01-secondary:         var(--color-01-80);
  --color-01-secondary-dark-1:  var(--color-01-78);
  --color-01-secondary-dark-2:  var(--color-01-76);
  --color-01-secondary-dark-3:  var(--color-01-74);
  --color-01-secondary-dark-4:  var(--color-01-72);
  --color-01-secondary-dark-5:  var(--color-01-70);
  --color-01-secondary-dark-6:  var(--color-01-68);
  --color-01-secondary-dark-7:  var(--color-01-66);
  --color-01-secondary-dark-8:  var(--color-01-64);
  --color-01-secondary-dark-9:  var(--color-01-62);
  --color-01-secondary-dark-10: var(--color-01-60);
  --color-01-secondary-dark-11: var(--color-01-58);
  --color-01-secondary-dark-12: var(--color-01-56);
  --color-01-secondary-dark-13: var(--color-01-54);
  --color-01-secondary-light-1: var(--color-01-92);
  --color-01-secondary-light-2: var(--color-01-93);
  --color-01-secondary-light-3: var(--color-01-94);
  --color-01-secondary-light-4: var(--color-01-95);

{% for i in range(1, 10) %}
{# @see https://chatgpt.com/share/67bcd94e-bb44-800f-bf63-06d1ae0f5096 #}
  {% set alpha = i * 10 %}
  --color-01-secondary-alpha-{{ alpha }}: rgba(var(--color-01-rgb-80), 0.{{ alpha }});
{% endfor %}

  --color-01-secondary-button:  var(--color-01-secondary-dark-4);
  --color-01-secondary-hover:   var(--color-01-secondary-dark-5);
  --color-01-secondary-active:  var(--color-01-secondary-dark-6);

  /* Console Colors */
  --color-01-console-fg:         var(--color-01-98);
  --color-01-console-fg-subtle:  var(--color-01-85);
  --color-01-console-bg:         var(--color-01-10);
  --color-01-console-border:     var(--color-01-40);
  --color-01-console-hover-bg:   var(--color-01-42);
  --color-01-console-active-bg:  var(--color-01-40);
  --color-01-console-menu-bg:    var(--color-01-38);
  --color-01-console-menu-border:var(--color-01-45);

  /* Body, Text, and Miscellaneous Colors */
  --color-01-white:      var(--color-01-99);
  --color-01-grey:       var(--color-01-60);
  --color-01-grey-light: var(--color-01-65);

  --color-01-body:       var(--color-01-white);
  --color-01-text-dark:  var(--color-01-10);
  --color-01-text:       var(--color-01-40);
  --color-01-text-light: var(--color-01-60);
  --color-01-text-light-1: var(--color-01-65);
  --color-01-text-light-2: var(--color-01-70);
  --color-01-text-light-3: var(--color-01-75);

  --color-01-footer:     var(--color-01-nav-bg);
  --color-01-timeline:   var(--color-01-80);

  /* Input Colors */
  --color-01-input-text: var(--color-01-10);
  --color-01-input-background: var(--color-01-white);
  --color-01-input-toggle-background: var(--color-01-80);
  --color-01-input-border: var(--color-01-secondary);
  --color-01-input-border-hover: var(--color-01-secondary-dark-1);

  /* Effects */
  --color-01-light: var(--color-01-05);
  --color-01-light-mimic-enabled: rgba(var(--color-01-rgb-05), calc(6 / 255 * 222 / 255 / 0.55));
  --color-01-light-border: var(--color-01-05);
  --color-01-hover: var(--color-01-05);
  --color-01-hover-opaque: var(--color-01-95);
  --color-01-active: var(--color-01-05);

  /* Menu, Card, and Markup Colors */
  --color-01-menu: var(--color-01-99);
  --color-01-card: var(--color-01-99);
  --color-01-markup-table-row: var(--color-01-01);
  --color-01-markup-code-block: var(--color-01-01);
  --color-01-markup-code-inline: var(--color-01-01);
  --color-01-button: var(--color-01-99);
  --color-01-code-bg: var(--color-01-99);
  --color-01-shadow: var(--color-01-05);
  --color-01-shadow-opaque: var(--color-01-85);
  --color-01-secondary-bg: var(--color-01-95);
  --color-01-expand-button: var(--color-01-98);
  --color-01-placeholder-text: var(--color-01-text-light-3);
  --color-01-editor-line-highlight: var(--color-01-primary-light-6);
  --color-01-project-column-bg: var(--color-01-secondary-light-4);
  --color-01-caret: var(--color-01-10);

  /* Reaction and Tooltip Colors */
  --color-01-reaction-bg: var(--color-01-05);
  --color-01-reaction-hover-bg: var(--color-01-primary-light-5);
  --color-01-reaction-active-bg: var(--color-01-primary-light-6);
  --color-01-tooltip-text: var(--color-01-99);
  --color-01-tooltip-bg: var(--color-01-05);

  /* Navigation Colors */
  --color-01-nav-bg: var(--color-01-99);
  --color-01-nav-hover-bg: var(--color-01-secondary-light-1);
  --color-01-nav-text: var(--color-01-40);
  --color-01-secondary-nav-bg: var(--color-01-99);

  /* Label and Accent Colors */
  --color-01-label-text: var(--color-01-40);
  --color-01-label-bg: var(--color-01-50);
  --color-01-label-hover-bg: var(--color-01-60);
  --color-01-label-active-bg: var(--color-01-70);
  --color-01-accent: var(--color-01-primary-light-1);
  --color-01-small-accent: var(--color-01-primary-light-6);
  --color-01-highlight-fg: var(--color-01-10);
  --color-01-highlight-bg: var(--color-01-99);
  --color-01-overlay-backdrop: var(--color-01-05);
}