_properties.scss

@use '_functions' as *;
@use '_mixins' as *;
@use '_variables' as *;

// =============================================================================
// WEAK - CANNOT OVERRIDE CHILD THEME VIA SITE SETTINGS
//
// Properties in a single scope lack the specificity to override child theme
// definitions in the same scope.
// =============================================================================

:root {
  // === CONFIGURATION =========================================================

  --site-width: #{$full-width}px; // Overridden by theme customizer
  --lightness-offset: 0; // Overridden by theme customizer
  --darken: (1 + var(--lightness-offset));
  --saturation-offset: 0; // Overridden by theme customizer
  --saturation: (1 + var(--saturation-offset));
  --font-saturation-offset: 0; // Overridden by theme customizer
  --font-saturation: (1 + var(--font-saturation-offset));
  --font-lightness-offset: 0; // Overridden by theme customizer
  --font-lightness: (1 + var(--font-lightness-offset));
  --hue-offset: 0deg; // Overridden by theme customizer
  --hue-rotate: 0deg + var(--hue-offset);
  --wp--style--block-gap: 1.5rem;

  // === SIDEBAR ===============================================================

  --sidebar-width: 256px; // Overridden by theme customizer
  --sidebar-gap: 3rem; // Overridden by theme customizer
  --sidebar-mobile-divider: 2px solid var(--layout-lineart-color);
  --sidebar-mobile-divider-margin: 1rem var(--layout-spacing-horizontal-small);

  // === FONT FAMILIES =========================================================

  --ff-system: '-apple-system', 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ff-base: 'Open Sans', var(--ff-system);
  --ff-heading: 'Open Sans', var(--ff-base);
  --ff-note: 'Lato', var(--ff-base);
  --ff-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
  --ff-input: var(--ff-base);
  --ff-card-title: var(--ff-heading);
  --ff-site-title: var(--ff-heading);
  --ff-story-title: var(--ff-heading);
  --ff-chapter-title: var(--ff-heading);
  --ff-chapter-list-title: var(--ff-base);
  --ff-card-body: var(--ff-note);
  --ff-card-list-link: inherit;
  --ff-nav-item: var(--ff-base);

  // === HEADER ================================================================

  --header-image-height: #{get_clamp(210, 480, 320, $full-width)};
  --header-height: calc(#{get_clamp(190, 380, 320, $full-width)} - var(--page-inset-top, 0px));
  --header-logo-height: 210px;

  --site-title-font-size: #{get_clamp(32, 60, 320, $full-width)};
  --site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)};
  --site-title-heading-color: var(--fg-400);
  --site-title-tagline-color: var(--fg-400);
  --site-title-text-shadow: 0 0 4px rgb(0 0 0 / 80%), 0 0 2px rgb(0 0 0 / 60%);

  // === ASSETS ================================================================

  --data-image-2x2-black: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAAAAACMmsGiAAAAC0lEQVQI12NgwAQAABQAAeWGsEoAAAAASUVORK5CYII=");

  // === NAVIGATION ============================================================

  --navigation-height: 48px;

  @include bp(desktop) {
    --navigation-height: 40px;
  }
}

// =============================================================================
// STRONG - CAN OVERRIDE CHILD THEME VIA SITE SETTINGS
//
// In addition to the base :root and nested scopes, these properties also
// answer to the :root[data-theme=base] selector of higher specificity. This
// means if the user selects the base theme via the Site Settings, definitions
// in the child theme can be overridden unless preventive measures are taken.
// =============================================================================

:root[data-mode=dark] {
  body {
    --wp--preset--color--vivid-red: var(--red-400); // Change for dark mode
    --wp--preset--color--vivid-cyan-blue: #26aeeb; // Change for dark mode
    --wp--preset--color--vivid-purple: #c792fc; // Change for dark mode

    ::selection {
      background-color: var(--text-selection-background);
      color: var(--text-selection-color);
      text-shadow: none;
    }
  }
}

:root, :root[data-theme=base] {
  // === UNSORTED ==============================================================

  --theme-color-base: 219 15 17; // 800
  --body-bg-color: var(--bg-900);
  --site-bg-color: var(--bg-800);
  --fullscreen-background: var(--page-bg-color);
  --dark-shade-rgb: 0 0 0;

  --read-ribbon-background: var(--bg-50);
  --read-ribbon-color: var(--fg-inverted);
  --read-ribbon-box-shadow: 0 0 2px rgb(0 0 0 / 30%);

  --code-background: rgb(var(--dark-shade-rgb) / 25%);
  --code-background-inline: rgb(var(--dark-shade-rgb) / 25%);
  --code-color: var(--fg-700);

  --spoiler-background: var(--bg-100);
  --spoiler-color-visible: var(--fg-inverted);

  --ins-background: var(--green-400);
  --ins-color: var(--fg-inverted);

  --del-background: var(--red-400);
  --del-color: var(--fg-inverted);

  --caption-overlay-background: linear-gradient(
    to top,
    hsla(0, 0%, 0%, 0.7) 0%,
    hsla(0, 0%, 0%, 0.691) 8.1%,
    hsla(0, 0%, 0%, 0.666) 15.5%,
    hsla(0, 0%, 0%, 0.627) 22.5%,
    hsla(0, 0%, 0%, 0.577) 29%,
    hsla(0, 0%, 0%, 0.519) 35.3%,
    hsla(0, 0%, 0%, 0.454) 41.2%,
    hsla(0, 0%, 0%, 0.385) 47.1%,
    hsla(0, 0%, 0%, 0.315) 52.9%,
    hsla(0, 0%, 0%, 0.246) 58.8%,
    hsla(0, 0%, 0%, 0.181) 64.7%,
    hsla(0, 0%, 0%, 0.123) 71%,
    hsla(0, 0%, 0%, 0.073) 77.5%,
    hsla(0, 0%, 0%, 0.034) 84.5%,
    hsla(0, 0%, 0%, 0.009) 91.9%,
    hsla(0, 0%, 0%, 0) 100%
  );
  --caption-overlay-color: #fff;
  --caption-padding: 1.25rem .5rem .5rem;

  --progress-bar-background: var(--navigation-background);
  --progress-bar-color: var(--bg-200);

  --skeleton-shape-color: var(--bg-300);
  --skeleton-cutout-color: var(--page-bg-color);

  --embed-background: var(--disabled-pattern);
  --embed-box-shadow: 0 0 1px rgb(var(--dark-shade-rgb) / 70%);

  --table-border-color: var(--fg-950);
  --table-border-color-striped: var(--fg-950);
  --table-background-striped: rgb(var(--dark-shade-rgb) / 15%);

  --calendar-th-background: var(--bg-800);
  --calendar-border-color: var(--bg-800);
  --calendar-color: var(--fg-700);

  --paragraph-spacing: 1.5rem;
  --blockquote-background: rgb(var(--dark-shade-rgb) / 15%);
  --placeholder-background: var(--bg-900);
  --kbd-background: rgb(var(--dark-shade-rgb) / 17%);
  --infobox-background: rgb(var(--dark-shade-rgb) / 17%);
  --text-shadow: -1px -1px 1px rgb(0 0 0 / 12%);
  --checkmark-checked: var(--fg-600);
  --checkmark-not-checked: var(--bg-900);
  --tax-cloud-current: var(--primary-500);
  --disabled-pattern: rgb(var(--dark-shade-rgb) / 8%) repeating-linear-gradient(-45deg, rgb(var(--dark-shade-rgb) / 8%), rgb(var(--dark-shade-rgb) / 8%) 2px, transparent 2px, transparent 5px);
  --strong-filter: brightness(1.05);
  --invert-filter: invert(0); // Checkbox check

  // === SPLIDE ================================================================

  --splide-arrow: var(--bg-400);
  --splide-arrow-hover: var(--bg-100);
  --splide-arrow-active: var(--bg-100);
  --splide-pagination: var(--bg-400);
  --splide-pagination-hover: var(--bg-300);
  --splide-pagination-active: var(--bg-100);

  // === LITRPG ================================================================

  --litrpg-background: var(--bg-50);
  --litrpg-color: var(--fg-inverted);
  --litrpg-ins: var(--green-600);
  --litrpg-del: var(--red-600);
  --litrpg-polygon: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  --litrpg-drop-shadow: var(--drop-shadow-m);

  // === CONTENT LISTS =========================================================

  --content-li-background: var(--content-li-background-gradient);
  --content-li-background-full: hsl(var(--bg-950-free) / 10%);
  --content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-950-free) / 10%) 0%, hsl(var(--bg-950-free) / 10%) 55%, transparent 90%);
  --content-li-hr-border: 1.5px solid var(--hr-border-color, var(--layout-lineart-color));

  --current-content-li-background: rgb(0 0 0 / 25%);

  // === COLORS ================================================================

  --primary-400: hsl(46deg 87% 75%);
  --primary-500: hsl(44deg 86% 70%);
  --primary-600: hsl(34deg 82% 70%);

  --green-400: #86a35f;
  --green-500: #78994d;
  --green-600: #6c8a45;

  --red-400: #f26666;
  --red-500: #f15555;
  --red-600: #d94d4d;

  // === BACKGROUNDS ===========================================================

  --bg-50-free: #{hsl_code_free(222, 12, 80)};
  --bg-100-free: #{hsl_code_free(222, 12, 68)};
  --bg-200-free: #{hsl_code_free(222, 12, 54)};
  --bg-300-free: #{hsl_code_free(222, 12, 38)};
  --bg-400-free: #{hsl_code_free(222, 13, 31)};
  --bg-500-free: #{hsl_code_free(222, 13, 26.5)};
  --bg-600-free: #{hsl_code_free(222, 14, 23.5)};
  --bg-700-free: #{hsl_code_free(221, 16, 20)};
  --bg-800-free: #{hsl_code_free(219, 15, 17)};
  --bg-900-free: #{hsl_code_free(222, 25, 8)};
  --bg-950-free: #{hsl_code_free(222, 60, 4)};

  --bg-50: hsl(var(--bg-50-free));
  --bg-100: hsl(var(--bg-100-free));
  --bg-200: hsl(var(--bg-200-free));
  --bg-300: hsl(var(--bg-300-free));
  --bg-400: hsl(var(--bg-400-free));
  --bg-500: hsl(var(--bg-500-free));
  --bg-600: hsl(var(--bg-600-free));
  --bg-700: hsl(var(--bg-700-free));
  --bg-800: hsl(var(--bg-800-free));
  --bg-900: hsl(var(--bg-900-free));
  --bg-950: hsl(var(--bg-950-free));

  // === CUSTOMIZER (FOR REFERENCE) ============================================

  // --top-header-background: transparent;

  // === LAYOUT ================================================================

  --layout-spacing-vertical: #{get_clamp(24, 48, 480, $full-width)};
  --layout-spacing-horizontal: #{get_clamp(20, 80, 480, $full-width, '%')};
  --layout-spacing-horizontal-small: #{get_clamp(10, 20, 320, 400, '%')};
  --layout-border-radius-large: 4px;
  --layout-border-radius-small: 2px;
  --layout-link-color: inherit;
  --layout-link-color-hover: inherit;
  --layout-lineart-color: var(--bg-300);
  --layout-hr-dots-color: var(--bg-200);
  --layout-hr-border: 2px solid var(--hr-border-color, var(--layout-lineart-color));
  --layout-hr-border-dashed: 2px dashed var(--hr-border-color, var(--layout-lineart-color));
  --layout-widget-spacing: 2rem;

  // === MINIMAL ===============================================================

  --minimal-page-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
  --minimal-page-drop-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 40%));
  --minimal-box-shadow: 0 0 1px rgb(0 0 0 / 40%);
  --minimal-drop-shadow: drop-shadow(0 0 1px rgb(0 0 0 / 40%));

  // === HEADER ================================================================

  --header-image-drop-shadow: drop-shadow(0 0 2px rgb(0 0 0 / 40%));

  // === PAGE ==================================================================

  --page-inset-top: 3rem;
  --page-bg-color: var(--bg-700);
  --page-box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  --page-drop-shadow: drop-shadow(0 1px 1.5px rgb(0 0 0 / 25%));

  // === CARDS =================================================================

  --card-bg-color: var(--bg-600);
  --card-footer-bg-color: var(--bg-800);
  --card-overlay-bg-color: var(--bg-800);
  --card-content-li-background: var(--card-content-li-background-gradient);
  --card-content-li-background-full: hsl(var(--bg-950-free) / 16%);
  --card-content-li-background-gradient: linear-gradient(to left, hsl(var(--bg-950-free) / 16%) 0%, hsl(var(--bg-950-free) / 16%) 55%, transparent 90%);
  --card-label-color: var(--fg-inverted);
  --card-label-background: var(--fg-500);
  --card-unavailable-filter: grayscale(0.5) blur(1.5px);
  --card-frame-border-color: var(--bg-800);

  // === NAVIGATION ============================================================

  --navigation-background: var(--bg-900);
  --navigation-background-start-opacity: 0;
  --navigation-background-end-opacity: 1;
  --navigation-submenu-background: var(--bg-400);
  --navigation-item-background-hover: var(--bg-400);
  --navigation-subitem-background-hover: var(--bg-300);
  --navigation-color: var(--fg-400);
  --navigation-color-hover: var(--fg-300);
  --navigation-font-size: #{get_clamp(14, 16, 375, 768)};
  --navigation-subitem-divider: 1px solid var(--bg-700);
  --navigation-submenu-box-shadow: 0 4px 3px -2px rgb(0 0 0 / 30%);
  --navigation-drop-shadow: drop-shadow(0 3px 2px rgb(0 0 0 / 20%));
  --navigation-new-follow-background: var(--primary-500);
  --navigation-new-follow-color: var(--fg-inverted);

  // === TABS ==================================================================

  --tab-background: var(--bg-500);
  --tab-background-hover: var(--bg-400);
  --tab-background-active: var(--bg-100);
  --tab-color: var(--fg-600);
  --tab-color-hover: var(--fg-500);
  --tab-color-active: var(--fg-inverted);
  --tab-text-shadow: 0 0 1px rgb(0 0 0 / 70%);

  // === PAGINATION ============================================================

  --pagination-background: var(--bg-500);
  --pagination-background-hover: var(--bg-400);
  --pagination-background-current: var(--bg-200);
  --pagination-color: var(--fg-600);
  --pagination-color-hover: var(--fg-500);
  --pagination-color-current: var(--fg-inverted);

  // === FOOTER ================================================================

  --fg-isolated-footer: var(--fg-700);
  --fg-isolated-footer-hover: var(--fg-300);
  --bg-isolated-footer: var(--bg-900);

  // === MODALS ================================================================

  --modal-overlay: rgb(0 0 0 / 35%);
  --modal-bg-color: var(--bg-600);

  // === SHADOWS ===============================================================

  --box-shadow-border: 0 0 0 1.5px var(--card-frame-border-color, rgb(0 0 0 / 60%));
  --box-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 9%), 0 -1px 1px 0 rgb(0 0 0 / 3%);
  --box-shadow-s: 0 1px 3px 0 rgb(0 0 0 / 11%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --box-shadow: 0 3px 6px -1px rgb(0 0 0 / 12%), 0 -1px 4px -2px rgb(0 0 0 / 15%);
  --box-shadow-m: rgb(0 0 0 / 14%) 0 2px 5px 0, rgb(0 0 0 / 5%) 0 1px 1px 0;
  --box-shadow-l: rgb(0 0 0 / 10%) 0 5px 12px -2px, rgb(0 0 0 / 15%) 0 1px 7px -3px;
  --box-shadow-xl: 0 3px 8px -1px rgb(0 0 0 / 9%), 0 3px 12px -1px rgb(0 0 0 / 17%);

  --drop-shadow-border: drop-shadow(0 -1.5px 0 var(--card-frame-border-color,rgb(0 0 0/70%))) drop-shadow(0 1.5px 0 var(--card-frame-border-color,rgb(0 0 0/70%))) drop-shadow(1.5px 0 0 var(--card-frame-border-color,rgb(0 0 0/70%))) drop-shadow(-1.5px 0 0 var(--card-frame-border-color,rgb(0 0 0/70%)));
  --drop-shadow-xs: drop-shadow(0 1px 1px rgb(0 0 0 / 6%)) drop-shadow(0 0 1px rgb(0 0 0 / 6%));
  --drop-shadow-s: drop-shadow(0 1px 2px rgb(0 0 0 / 7%)) drop-shadow(0 1px 1px rgb(0 0 0 / 7%));
  --drop-shadow: drop-shadow(0 2px 2px rgb(0 0 0 / 10%)) drop-shadow(0 -1px 5px rgb(0 0 0 / 4%));
  --drop-shadow-m: drop-shadow(0 2px 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 1px rgb(0 0 0 / 10%));
  --drop-shadow-l: drop-shadow(0 4px 5px rgb(0 0 0 / 5%)) drop-shadow(0 3px 5px rgb(0 0 0 / 7%));
  --drop-shadow-xl: drop-shadow(0 3px 5px rgb(0 0 0 / 11%)) drop-shadow(0 3px 6px rgb(0 0 0 / 11%));

  // === MOBILE MENU ===========================================================

  --mobile-menu-background: var(--bg-700);
  --mobile-menu-advanced-background: color-mix(in srgb, var(--bg-900), white 3%);
  --mobile-menu-box-shadow: 2px 0 3px rgb(0 0 0 / 30%);
  --mobile-advanced-menu-site-box-shadow: inset -5px 0 3px -4px rgb(0 0 0 / 30%);
  --mobile-menu-overlay: rgb(0 0 0 / 50%);
  --mobile-menu-bookmark-progress-background: rgb(0 0 0 / 40%);

  // === FONT SETTINGS =========================================================

  --font-smoothing-webkit: subpixel-antialiased; // Default
  --font-smoothing-moz: auto; // Default
  --font-weight-normal: 300;
  --font-weight-strong: 500;
  --font-weight-semi-strong: 400;
  --font-weight-medium: 400;
  --font-weight-heading: 600;
  --font-weight-badge: 600;
  --font-weight-post-meta: 300;
  --font-weight-read-ribbon: 600;
  --font-weight-card-label: 600;
  --font-weight-navigation: 400;
  --font-line-height-base: 1.7;
  --font-letter-spacing-base: 0.01em;

  // === FONT SIZES ============================================================

  --fs-xxxs: .625rem; // 10px
  --fs-xxs: .75rem; // 12px
  --fs-xs: .875rem; // 14px
  --fs-s: 1rem; // 16px
  --fs-m: 1.125rem; // 18px
  --fs-ml: 1.25rem; // 20px
  --fs-l: 1.5rem; // 24px
  --fs-xl: 1.75rem; // 28px
  --fs-xxl: 2.125rem; // 34px
  --fs-xxxl: 2.5rem; // 40px
  --fs-xxxxl: 3rem; // 48px

  --fs-em-xxxs: .625em; // 10px
  --fs-em-xxs: .75em; // 12px
  --fs-em-xs: .875em; // 14px
  --fs-em-s: 1em; // 16px
  --fs-em-m: 1.125em; // 18px
  --fs-em-ml: 1.25em; // 20px
  --fs-em-l: 1.5em; // 24px
  --fs-em-xl: 1.75em; // 28px
  --fs-em-xxl: 2.125em; // 34px
  --fs-em-xxxl: 2.5em; // 40px
  --fs-em-xxxxl: 3em; // 48px

  --fs-dxxs: #{get_clamp(11, 13, 400, 768)};
  --fs-dxs: #{get_clamp(12, 13, 400, 768)};
  --fs-ds: #{get_clamp(13, 14, 400, 768)};

  --fs-widget: #{clamp(13px, 5.5cqw, 15px)};

  // === LINKS =================================================================

  --heading-link-color: var(--fg-400);
  --heading-link-color-hover: var(--fg-200);

  --inline-link-color: var(--primary-500);
  --inline-link-color-hover: var(--primary-400);
  --inline-link-color-visited: var(--primary-600);

  --inline-link-text-decoration: underline transparent solid 1px;
  --inline-link-text-decoration-hover: underline currentColor solid 1px;

  --widget-link-color: inherit;
  --widget-link-color-hover: var(--fg-200);

  // === COLORS - BOOKMARKS ====================================================

  --bookmark-color-alpha: #7d8497; // FG-900
  --bookmark-color-beta: #e06552;
  --bookmark-color-gamma: #77BFA3;
  --bookmark-color-delta: #3C91E6;
  --bookmark-line: var(--primary-500);
  --bookmark-button-color-active-alpha: var(--fg-inverted);
  --bookmark-button-color-active-beta: var(--fg-inverted);
  --bookmark-button-color-active-gamma: var(--fg-inverted);
  --bookmark-button-color-active-delta: var(--fg-inverted);
  --bookmark-progress-opacity: .15;
  --bookmark-progress-mobile-opacity: .75;

  // === BUTTONS - GENERAL =====================================================

  --button-font-weight: 500;
  --button-box-shadow: none;
  --button-color-active: var(--fg-inverted);
  --button-background-active: var(--bg-100);
  --button-border-active: 1px solid transparent;
  --button-barberpole: var(--bg-500);
  --button-oauth-connected: var(--button-background-active);

  // === BUTTONS - PRIMARY =====================================================

  --button-primary-background: var(--bg-400);
  --button-primary-background-hover: var(--bg-300);
  --button-primary-background-disabled: var(--bg-500);
  --button-primary-color: var(--fg-400);
  --button-primary-color-hover: var(--fg-300);
  --button-primary-color-disabled: var(--fg-700);
  --button-primary-filter-disabled: saturate(.7) opacity(.3) brightness(1.4);

  // === BUTTONS - SECONDARY ===================================================

  --button-secondary-background: transparent;
  --button-secondary-background-hover: var(--bg-500);
  --button-secondary-background-disabled: repeating-linear-gradient(-45deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 6%) 2px, transparent 2px, transparent 4px);
  --button-secondary-color: var(--fg-600);
  --button-secondary-color-hover: var(--fg-400);
  --button-secondary-color-disabled: var(--fg-800);
  --button-secondary-border: 1px solid var(--bg-300);
  --button-secondary-border-hover: 1px solid var(--bg-200);
  --button-secondary-border-disabled: 1px solid var(--bg-300);

  // === BUTTONS - WARNING ======================================================

  --button-warning-background: var(--red-500);
  --button-warning-background-hover: var(--red-600);
  --button-warning-color: #fff;
  --button-warning-color-hover: #fff;

  // === BUTTONS - SUGGESTION ===================================================

  --button-suggestion-color: var(--fg-inverted);
  --button-suggestion-color-hover: var(--fg-inverted);
  --button-suggestion-background: var(--bg-100);
  --button-suggestion-background-hover: var(--bg-50);

  // === BUTTONS - QUICK =======================================================

  --button-quick-background: var(--bg-500);
  --button-quick-background-hover: var(--bg-300);
  --button-quick-color: var(--fg-600);
  --button-quick-color-hover: var(--fg-400);

  // === BUTTONS - FILE BLOCK ==================================================

  --button-file-block-color: var(--fg-inverted);
  --button-file-block-color-hover: var(--fg-inverted);
  --button-file-block-background: var(--bg-100);
  --button-file-block-background-hover: var(--bg-50);

  // === PASSWORD FORM =========================================================

  --post-password-background: var(--input-background);
  --post-password-cutout: var(--bg-700);
  --post-password-submit-color: var(--bg-500);

  // === INPUTS ================================================================

  --input-placeholder-color: var(--fg-950);
  --input-background: rgb(var(--dark-shade-rgb) / 32%);
  --input-background-disabled: rgb(var(--dark-shade-rgb) / 15%) repeating-linear-gradient(-45deg, rgb(var(--dark-shade-rgb) / 15%), rgb(var(--dark-shade-rgb) / 15%) 2px, transparent 2px, transparent 5px);
  --input-color: var(--fg-500);
  --input-color-disabled: var(--fg-800);
  --input-fill: var(--fg-700);
  --input-range-thumb: var(--fg-700);
  --input-range-thumb-hover: var(--fg-300);
  --input-token-background: var(--bg-500);
  --input-token-color: var(--fg-400);

  // === POPUP MENU ============================================================

  --popup-menu-background: var(--bg-50);
  --popup-menu-background-hover: var(--bg-100);
  --popup-menu-color: var(--fg-inverted);
  --popup-menu-color-hover: var(--fg-inverted);

  // === MICRO MENU ============================================================

  --micro-menu-background: var(--bg-900);
  --micro-menu-color: var(--fg-400);
  --micro-menu-color-hover: var(--fg-200);
  --micro-menu-box-shadow: var(--box-shadow-l);

  // === TOOLTIPS/NOTIFICATIONS ================================================

  --tooltip-background: var(--bg-50);
  --tooltip-text: var(--fg-inverted);

  --notice-default-background: var(--bg-50);
  --notice-default-color: var(--fg-inverted);
  --notice-warning-background: var(--red-500);
  --notice-warning-color: #fff;
  --notice-success-background: var(--green-500);
  --notice-success-color: #fff;
  --notice-box-shadow: var(--box-shadow-l);

  // === COMMENTS ==============================================================

  --comment-background: rgb(var(--dark-shade-rgb) / 15%);
  --comment-background-private: var(--comment-background) repeating-linear-gradient(-45deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 10%) 3px, transparent 3px, transparent 6px);
  --comment-background-deleted: var(--comment-background) repeating-linear-gradient(-45deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 3%) 3px, transparent 3px, transparent 6px);
  --comment-background-offensive: var(--comment-background) repeating-linear-gradient(45deg, rgb(255 255 255 / 3%), rgb(255 255 255 / 3%) 3px, transparent 3px, transparent 6px);
  --comment-background-sticky: rgb(var(--dark-shade-rgb) / 20%);
  --comment-border-sticky: 1px dashed rgb(255 255 255 / 20%);

  --load-comments-background: rgb(var(--dark-shade-rgb) / 15%);
  --load-comments-background-hover: rgb(var(--dark-shade-rgb) / 25%);
  --load-comments-color: var(--fg-700);
  --load-comments-color-hover: var(--fg-600);

  // === SYSTEM ================================================================

  --transition-duration: .2s;
  --text-selection-background: rgb(255 255 255 / 20%);
  --text-selection-color: var(--fg-100);

  // === SCROLL BARS ===========================================================

  --scrollbar-background: rgb(var(--dark-shade-rgb) / 20%);
  --scrollbar-thumb: var(--fg-950);
  --scrollbar-box-shadow: inset 0 0 6px rgb(0 0 0 / 10%);

  // === BADGES ================================================================

  --badge-generic-color: var(--fg-400);
  --badge-generic-background: #505062;
  --badge-supporter-color: var(--fg-100);
  --badge-supporter-background: #e4445e;
  --badge-moderator-color: var(--fg-200);
  --badge-moderator-background: #4d628f;
  --badge-admin-color: var(--fg-100);
  --badge-admin-background: #79518d;
  --badge-author-color: var(--fg-200);
  --badge-author-background: #b37819;
  --badge-override-color: var(--fg-300);
  --badge-override-background: #5a5a7f;

  // === FOREGROUNDS ===========================================================

  // Placed here due to SCSS/CSS nesting rules

  &,
  .chapter-formatting {
    // Needs to be repeated to force recalculation in chapters
    // Contrast vs bg-700
    --fg-100: #{hsl_font_code(222, 40, 93)}; // Contrast ratio vs bg-700 ~ 11
    --fg-200: #{hsl_font_code(222, 26, 89)}; // Contrast ratio vs bg-700 ~ 10
    --fg-300: #{hsl_font_code(224, 20, 85)}; // Contrast ratio vs bg-700 ~ 9.02
    --fg-400: #{hsl_font_code(222, 18, 80.5)}; // Contrast ratio vs bg-700 ~ 8.02
    --fg-500: #{hsl_font_code(222, 18, 77)}; // Contrast ratio vs bg-700 ~ 7.26
    --fg-600: #{hsl_font_code(224, 18, 71)}; // Contrast ratio vs bg-700 ~ 6.01
    --fg-700: #{hsl_font_code(224, 16, 65)}; // Contrast ratio vs bg-700 ~ 5
    --fg-800: #{hsl_font_code(222, 12, 61)}; // Contrast ratio vs bg-700 ~ 4.5
    --fg-900: #{hsl_font_code(222, 11, 54)}; // Contrast ratio vs bg-700 ~ 3.55
    --fg-950: #{hsl_font_code(222, 9, 49)}; // Contrast ratio vs bg-700 ~ 3
    --fg-tinted: #{hsl_font_code(224, 22, 76)}; // Contrast ratio vs bg-700 ~ 6.92
    --fg-inverted: #{hsl_font_code(222, 20, 5)}; // Contrast ratio vs bg-200 ~ 4.51
  }

  // === SCOPES ================================================================

  .consent-banner {
    --consent-banner-color: var(--fg-600);
    --consent-banner-background: var(--bg-900);
  }

  .selected-paragraph {
    --paragraph-selection-background: rgb(255 255 255 / 10%);
    --paragraph-tools-filter: drop-shadow(0 1px 4px rgb(0 0 0 / 33%));
    --button-bookmark-background-active: var(--primary-500);
  }

  .tts-interface {
    --tts-background: var(--bg-900);
    --tts-button-active-background: var(--primary-500);
    --tts-button-active-text: var(--fg-inverted);
  }

  .current-reading {
    --tts-current-reading-background: rgb(255 255 255 / 5%);
  }

  .toggle {
    --toggle-background: transparent;
    --toggle-background-checked: var(--bg-100);
    --toggle-background-hover: var(--bg-50);

    --toggle-color: var(--fg-600);
    --toggle-color-hover: var(--fg-300);
    --toggle-color-checked: var(--fg-inverted);
    --toggle-color-checked-hover: var(--fg-inverted);

    --toggle-border: var(--bg-100);
    --toggle-border-checked: var(--bg-100);
    --toggle-border-hover: var(--bg-50);
  }

  .tag-pill {
    --tag-background: var(--bg-400);
    --tag-background-hover: var(--bg-300);
    --tag-color: var(--fg-400);
    --tag-color-hover: var(--fg-200);

    --tag-secondary-background: transparent;
    --tag-secondary-background-hover: var(--bg-400);
    --tag-secondary-color: var(--fg-800);
    --tag-secondary-color-hover: var(--fg-200);
    --tag-secondary-border: .5px solid var(--bg-300);
    --tag-secondary-border-hover: .5px solid transparent; // Uses background

    --tag-inline-color: var(--fg-700);
    --tag-inline-color-hover: var(--fg-400);

    --tag-warning-background: rgb(246 96 85 / 5%); // Fallback
    --tag-warning-background: color-mix(in srgb, var(--red-500), transparent 90%);
    --tag-warning-background-hover: rgb(246 96 85 / 50%); // Fallback
    --tag-warning-background-hover: color-mix(in srgb, var(--red-500), transparent 35%);
    --tag-warning-color: var(--fg-800);
    --tag-warning-color-hover: var(--fg-100);
    --tag-warning-border: .5px solid var(--bg-300);
    --tag-warning-border-hover: .5px solid transparent; // Uses background
  }
}

:root.minimal,
:root[data-theme=base].minimal {
  --site-title-heading-color: var(--fg-300);
  --site-title-tagline-color: var(--fg-300);
  --site-title-text-shadow: none;
  --text-shadow: none;
  --mobile-menu-text-shadow: none;
  --paragraph-tools-filter: none;
  --content-li-background: var(--minimal-content-li-background, var(--content-li-background-full));
  --story-blog-li-background: var(--minimal-content-li-background, var(--content-li-background-full));
  --chapter-li-background: var(--minimal-content-li-background, var(--content-li-background-full));
  --card-content-li-background: var(--minimal-card-content-li-background, var(--card-content-li-background-full));
  --embed-box-shadow: var(--minimal-box-shadow);
  --box-shadow-xs: var(--minimal-box-shadow);
  --box-shadow-s: var(--minimal-box-shadow);
  --box-shadow: var(--minimal-box-shadow);
  --box-shadow-m: var(--minimal-box-shadow);
  --box-shadow-l: var(--minimal-box-shadow);
  --box-shadow-xl: var(--minimal-box-shadow);
  --drop-shadow-xs: var(--minimal-drop-shadow);
  --drop-shadow-s: var(--minimal-drop-shadow);
  --drop-shadow: var(--minimal-drop-shadow);
  --drop-shadow-m: var(--minimal-drop-shadow);
  --drop-shadow-l: var(--minimal-drop-shadow);
  --drop-shadow-xl: var(--minimal-drop-shadow);
  --page-box-shadow: var(--minimal-page-box-shadow);
  --page-drop-shadow: var(--minimal-page-drop-shadow);
  --card-box-shadow: 0 0 0 1px var(--card-frame-border-color, rgb(0 0 0 / 20%)); // Override custom style
  --card-drop-shadow: 0 0 1px var(--card-frame-border-color, rgb(0 0 0 / 30%)); // Override custom style
  --card-style-border-width: 1px;
}

// =============================================================================
// FONT WEIGHTS
// =============================================================================

:root[data-font-weight=normal]:is(html) {
  --font-smoothing-webkit: subpixel-antialiased;
  --font-smoothing-moz: auto;
  --font-weight-normal: 400;
  --font-weight-semi-strong: 600;
  --font-weight-strong: 600;
  --font-weight-medium: 500;
  --font-weight-heading: 700;
  --font-weight-badge: 600;
  --font-weight-post-meta: 400;
  --font-weight-read-ribbon: 700;
  --font-weight-card-label: 600;
  --font-weight-navigation: 400;
  --font-letter-spacing-base: 0em; // Unit is required!
}

:root[data-font-weight=thinner]:is(html) {
  --font-weight-normal: 300;
  --font-weight-strong: 500;
  --font-weight-medium: 400;
  --font-weight-heading: 600;
  --font-weight-badge: 600;
  --font-weight-post-meta: 300;
  --font-weight-read-ribbon: 500;
  --font-weight-navigation: 400;
}