/***
Global Theming Styles – Color and Shadow Variables 
HINT: 
- Better overwritte CSS variables instead of individual elements.
- Don't use !important. If possible use a specific selector.
*/
{% if design.font.import_url %}
@import url('{{ design.font.import_url }}');
{% endif %}
/* Auto-generated by colorscheme-generator */
:root {
  {% for var_name, color in CSS_COLOR_PALETTE.items() %}
    {{ var_name }}: {{ color }};
  {% endfor %}
}
@media (prefers-color-scheme: dark) {
  :root {
    {% for var_name, color in CSS_COLOR_PALETTE_INVERTED.items() %}
      {{ var_name }}: {{ color }};
    {% endfor %}
  }
}
:root, ::after, ::before, ::backdrop {
    --native-dark-accent-color:         var(--color-01-60);
    --native-dark-bg-color:             var(--color-01-10);
    --native-dark-bg-image-color:       rgba(var(--color-rgb-01-01), 0.10);
    --native-dark-border-color:         var(--color-01-40);
    --native-dark-box-shadow:           0 0 0 1px rgb(var(--color-rgb-01-99), / 10%);
    --native-dark-cite-color:           var(--color-01-70);
    --native-dark-fill-color:           var(--color-01-50);
    --native-dark-font-color:           var(--color-01-95);
    --native-dark-link-color:           var(--color-01-80);
    --native-dark-visited-link-color:   var(--color-01-85);
}
/* Bootstrap Overrides (Color/Shadow Variables Only) */
:root {
  --bs-black: var(--color-01-01);
  --bs-white: var(--color-01-99);
  --bs-gray: var(--color-01-50);
  --bs-gray-dark: var(--color-01-20);
{% for i in range(1, 10) %}
  {% set gray = i * 100 %}
  {% set color = 100 - i * 10 %}
  --bs-gray-{{ gray }}: var(--color-01-{{ "%02d" % color }});
{% endfor %}
  --bs-primary: var(--color-01-65);
  --bs-light: var(--color-01-95);
  --bs-dark: var(--color-01-10);
  --bs-primary-rgb: var(--color-rgb-01-65);
  --bs-secondary-rgb: var(--color-rgb-01-50);
  --bs-light-rgb: var(--color-rgb-01-95);
  --bs-dark-rgb: var(--color-rgb-01-10);
  --bs-white-rgb: var(--color-rgb-01-99);
  --bs-black-rgb: var(--color-rgb-01-01);
  --bs-body-color-rgb: var(--color-rgb-01-10);
  --bs-body-bg-rgb: var(--color-rgb-01-99);
  --bs-body-color: var(--color-01-10);
  --bs-body-bg: var(--color-01-99);
  --bs-border-color: var(--color-01-85);
  --bs-link-color: var(--color-01-65);
  --bs-link-hover-color: var(--color-01-60);
  --bs-code-color: var(--color-01-55);
  --bs-highlight-bg: var(--color-01-93);
  --bs-list-group-bg: var(--color-01-40);
  --bs-emphasis-color: var(--color-01-01);
  --bs-emphasis-color-rgb: var(--color-rgb-01-01);
  --bs-secondary-color: rgba(var(--color-rgb-01-10), 0.75);
  --bs-secondary-color-rgb: var(--color-rgb-01-10);
  --bs-secondary-bg: var(--color-01-90);
  --bs-secondary-bg-rgb: var(--color-rgb-01-90);
  --bs-tertiary-color: rgba(var(--color-rgb-01-10), 0.5);
  --bs-tertiary-color-rgb: var(--color-rgb-01-10);
  --bs-tertiary-bg: var(--color-01-95);
  --bs-tertiary-bg-rgb: var(--color-rgb-01-95);
  --bs-link-color-rgb: var(--color-rgb-01-65);
  --bs-link-hover-color-rgb: var(--color-rgb-01-60);
  --bs-highlight-color: var(--color-01-10);
  --bs-border-color-translucent: rgba(var(--color-rgb-01-01), 0.175);
  --bs-focus-ring-color: rgba(var(--color-rgb-01-65), 0.25);
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--color-01-99);
  --bs-table-border-color: var(--color-01-99);
  --bs-table-striped-bg: var(--color-01-85);
  --bs-table-hover-color: var(--color-01-01);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
}
/* Global Defaults (Colors Only) */
body, html[native-dark-active] {
    background-color: var(--color-01-93);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-93), var(--color-01-91), var(--color-01-95), var(--color-01-93));
    background-attachment: fixed;
    color: var(--color-01-40);
    font-family: {{ design.font.type }};
}
{# All links (applies to all anchor elements regardless of state) #}
a {
    color: var(--color-01-50);
}
{# Unvisited links (applies only to links that have not been visited) #}
a:link {
    color: var(--color-01-55);
}
{# Visited links (applies only to links that have been visited) #}
a:visited {
    color: var(--color-01-45);
}
{# Hover state (applies when the mouse pointer is over the link) #}
a:hover {
    color: var(--color-01-60);
}
{# Active state (applies during the time the link is being activated, e.g., on click) #}
a:active {
    color: var(--color-01-65);
}
/** Set default buttons transparent **/ 
html[native-dark-active] button, button{
     background-color: var(--color-01-87);
}
button:hover,
.btn:not(.stretched-link):hover {
    filter: brightness(0.9);
}
input:invalid,
textarea:invalid,
select:invalid {
    background-color: var(--color-01-01);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-01), var(--color-01-10));
    color: var(--bs-danger);
    border-color: var(--color-01-20);
}
input:valid,
textarea:valid,
select:valid {
    background-color: var(--color-01-80);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-80), var(--color-01-90));
    color: var(--bs-success);
    border-color: var(--color-01-70);
}
input:required,
textarea:required,
select:required {
    background-color: var(--color-01-50);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-50), var(--color-01-60));
    color: var(--bs-warning);
    border-color: var(--color-01-70);
}
input:optional,
textarea:optional,
select:optional {
    background-color: var(--color-01-60);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-60), var(--color-01-70));
    color: var(--bs-info);
    border-color: var(--color-01-70);
}
input:read-only,
textarea:read-only,
select:read-only {
    background-color: var(--color-01-80);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-90), var(--color-01-70));
    color: var(--color-01-20);
    border-color: var(--color-01-50);
}
input:read-write,
textarea:read-write,
select:read-write {
    background-color: var(--color-01-70);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-70), var(--color-01-80));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}
input:in-range,
textarea:in-range,
select:in-range {
    background-color: var(--color-01-70);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-70), var(--color-01-85));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}
input:out-of-range,
textarea:out-of-range,
select:out-of-range {
    background-color: var(--color-01-10);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-10), var(--color-01-30));
    color: var(--color-01-10);
    border-color: var(--color-01-50);
}
input:placeholder-shown,
textarea:placeholder-shown,
select:placeholder-shown {
    background-color: var(--color-01-82);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-82), var(--color-01-90));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}
input:focus,
textarea:focus,
select:focus {
    background-color: var(--color-01-75);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-75), var(--color-01-85));
    color: var(--color-01-40);
    border-color: var(--color-01-50);
}
input:hover,
textarea:hover,
select:hover {
    background-color: var(--color-01-78);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-78), var(--color-01-88));
    color: var(--color-01-40);
    border-color: var(--color-01-65);
}
input:active,
textarea:active,
select:active {
    background-color: var(--color-01-68);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-68), var(--color-01-78));
    color: var(--color-01-40);
    border-color: var(--color-01-60);
}
/* {# Checked state: specifically for radio buttons and checkboxes when selected. #} */
input:checked {
    background-color: var(--color-01-90);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-90), var(--color-01-99));
    color: var(--color-01-40);
    border-color: var(--color-01-70);
}
input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    background: none;
}
option {
    background-color: var(--color-01-82);
    color: var(--color-01-07);
}
/* Tables (Borders and Header Colors) */
th, td {
    border-color: var(--color-01-70);
}
thead {
    background-color: var(--color-01-80);
    background: linear-gradient({{ CSS_GRADIENT_ANGLE }}deg, var(--color-01-75), var(--color-01-80), var(--color-01-81), var(--color-01-85));
    color: var(--color-01-40);
}
/* Headings (Text Color) */
h1, h2, h3, h4, h5, h6, p{
    color: var(--color-01-10);
}
label {
    color: var(--color-01-20);
}