// ================================================================================
// CSS Custom Properties (CSS Variables)
// ================================================================================
// This file defines all CSS custom properties for the FixIt theme.
// Variables are organized into two main categories:
// 1. Theme-independent variables: fixed values (fonts, sizes, etc.)
// 2. Theme-dependent variables: color values that support light/dark themes
//
// Theme-dependent variables are further categorized into:
// - Core: Global layout and navigation colors
// - Page Content: Article and post content colors
// - Third-party: Extension and plugin colors
//
// These CSS variables enable runtime theme switching and customization.
// ================================================================================

:root {
  interpolate-size: allow-keywords;

  // ----------------------------------------
  // Theme-Independent Variables
  // ----------------------------------------
  @include set-fixit-vars((
    // Global Typography
    global-font-family: $global-font-family,
    global-font-size: $global-font-size,
    global-font-weight: $global-font-weight,
    global-line-height: $global-line-height,
    global-scroll-margin-top: $global-scroll-margin-top,
    global-border-radius: $global-border-radius,

    // Header
    header-height: $header-height,
    header-title-font-family: $header-title-font-family,
    header-title-font-size: $header-title-font-size,
    submenu-height: $submenu-height,

    // Single Content
    toc-title-font-size: $toc-title-font-size,
    toc-content-font-size: $toc-content-font-size,
    collection-title-font-size: $collection-title-font-size,
    collection-list-font-size: $collection-list-font-size,
    related-title-font-size: $related-title-font-size,
    related-list-font-size: $related-list-font-size,
    reward-img-width: $reward-img-width,

    // Code
    code-font-size: $code-font-size,
    code-block-font-size: $code-block-font-size,
    code-font-family: $code-font-family,
    code-error-color: $code-error-color,

    // Scrollbar
    scrollbar-track-color: transparent,
    scrollbar-width: thin,
    scrollbar-width-legacy: 12px,

    // Other utilities
    breadcrumb-height: 0px,
    divider-edge-weak: linear-gradient(to right, transparent, fixit-var(divider-bg, #d0d0d5), transparent),
    scroll-mt: calc(#{fixit-var(header-height)} + #{fixit-var(global-scroll-margin-top)}),
  ));
}

// ----------------------------------------
// Theme-Dependent Color Variables
// ----------------------------------------

// Theme colors variables
@include set-theme-colors;

// Core theme colors (global layout)
@include define-theme-vars((
  // Global
  global-background-color: (light: $global-background-color, dark: $global-background-color-dark),
  global-font-color: (light: $global-font-color, dark: $global-font-color-dark),
  global-placeholder-color: (light: $global-placeholder-color, dark: $global-placeholder-color-dark),
  global-link-color: (light: $global-link-color, dark: $global-link-color-dark),
  global-link-hover-color: (light: $global-link-hover-color, dark: $global-link-hover-color-dark),
  global-border-color: (light: $global-border-color, dark: $global-border-color-dark),
  global-border-color-light: (light: lighten($global-border-color, 5%), dark: darken($global-border-color-dark, 5%)),
  global-border-color-weight: (light: darken($global-border-color, 5%), dark: lighten($global-border-color-dark, 5%)),

  // Header
  header-background-color: (light: $header-background-color, dark: $header-background-color-dark),
  menu-active-color: (light: $menu-active-color, dark: $menu-active-color-dark),
  menu-border-color: (light: $menu-border-color, dark: $menu-border-color-dark),
  search-background-color: (light: $search-background-color, dark: $search-background-color-dark),

  // Selection
  selection-color: (light: $selection-color, dark: $selection-color-dark),

  // Scrollbar
  scrollbar-color: (light: $scrollbar-color, dark: $scrollbar-color),
  scrollbar-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),
  scrollbar-thumb-color: (light: $scrollbar-color, dark: $scrollbar-color),
  scrollbar-thumb-hover-color: (light: $scrollbar-hover-color, dark: $scrollbar-hover-color),

  // Tag Cloud
  tag-cloud-start: (light: $tag-cloud-start, dark: $tag-cloud-start-dark),
  tag-cloud-end: (light: $tag-cloud-end, dark: $tag-cloud-end-dark),

  // Pagination
  pagination-link-color: (light: $pagination-link-color, dark: $pagination-link-color-dark),
  pagination-link-hover-color: (light: $pagination-link-hover-color, dark: $pagination-link-hover-color-dark),
));

// Page content theme colors
@include define-theme-vars((
  // Single Content
  single-link-color: (light: $single-link-color, dark: $single-link-color-dark),
  single-link-hover-color: (light: $single-link-hover-color, dark: $single-link-hover-color-dark),
  table-background-color: (light: $table-background-color, dark: $table-background-color-dark),
  table-thead-color: (light: $table-thead-color, dark: $table-thead-color-dark),
  blockquote-color: (light: $blockquote-color, dark: $blockquote-color-dark),
  reward-color: (light: $reward-color, dark: $reward-color-dark),

  // Divider
  hr-active-color: (light: lighten($single-link-hover-color, 4%), dark: darken($global-link-hover-color-dark, 4%)),

  // Code
  code-color: (light: $code-color, dark: $code-color-dark),
  code-inline-background-color: (light: rgba(175, 184, 193, 0.2), dark: rgba(99, 110, 123, 0.4)),
  code-block-background-color: (light: $code-background-color, dark: $code-background-color-dark),
  code-header-color: (light: $code-header-color, dark: $code-header-color-dark),
  code-header-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
  code-highlight-color: (light: $code-highlight-color, dark: $code-highlight-color-dark),
  gist-meta-background-color: (light: darken($code-background-color, 5%), dark: darken($code-background-color-dark, 5%)),
));

// Third-party component theme colors (extensions and plugins)
@include define-theme-vars((
  // GitHub Corners
  github-corner-color: (light: $github-corner-color, dark: $github-corner-color-dark),
  github-corner-fill: (light: $github-corner-fill, dark: $github-corner-fill-dark),
));