/* ================================================================
   TOKENS.CSS — Design Token Architecture
   SimpleWebsites Template Factory
   
   Two-tier system:
   1. FOUNDATION TOKENS (26) — Must be defined by each color scheme
   2. COMPONENT TOKENS (~270) — Auto-inherit from foundation via fallback
   
   Managers only configure foundation tokens.
   Component tokens are overridden only when needed via *-override vars.
   
   Load order: reset.css → [tokens.css] → schemes.css → fonts.css
   ================================================================ */


/* ================================================================
   SECTION 1: FOUNDATION TOKENS (26 required)
   
   These define the entire color scheme.
   Default values below use the "Clean" scheme (teal/fresh)
   as a safe fallback — schemes.css overrides all of these.
   ================================================================ */

:root {

  /* ----------------------------------------
     1.1 Background (5 tokens)
     ---------------------------------------- */
  --bg-body: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F8FAFC;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(15, 23, 42, 0.5);

  /* ----------------------------------------
     1.2 Text (4 tokens)
     ---------------------------------------- */
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverted: #FFFFFF;

  /* ----------------------------------------
     1.3 Brand (6 tokens)
     ---------------------------------------- */
  --primary: #0D9488;
  --on-primary: #FFFFFF;
  --primary-hover: #0F766E;
  --primary-soft: rgba(13, 148, 136, 0.1);
  --on-primary-soft: #0D9488;
  /* RGB channel extraction for rgba() usage in components */
  --primary-rgb: 13, 148, 136;

  /* ----------------------------------------
     1.4 Border (1 token)
     ---------------------------------------- */
  --border: #E2E8F0;

  /* ----------------------------------------
     1.5 State (6 tokens)
     ---------------------------------------- */
  --success: #22C55E;
  --on-success: #FFFFFF;
  --warning: #F59E0B;
  --on-warning: #FFFFFF;
  --error: #EF4444;
  --on-error: #FFFFFF;

  /* ----------------------------------------
     1.6 Shadow (4 tokens)
     ---------------------------------------- */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 2px var(--shadow-color);
  --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
}


/* ================================================================
   SECTION 2: DERIVED FOUNDATION TOKENS
   
   Computed from foundation tokens. Not part of the core 26
   but needed as intermediaries for component fallback chains.
   ================================================================ */

:root {
  /* Extended border */
  --border-strong: var(--border-strong-override, var(--text-muted));

  /* Extended text */
  --text-disabled: var(--text-disabled-override, var(--text-muted));

  /* State — soft variants (computed) */
  --success-soft: color-mix(in srgb, var(--success) 15%, var(--bg-surface));
  --on-success-soft: var(--success);
  --warning-soft: color-mix(in srgb, var(--warning) 15%, var(--bg-surface));
  --on-warning-soft: var(--warning);
  --error-soft: color-mix(in srgb, var(--error) 15%, var(--bg-surface));
  --on-error-soft: var(--error);

  /* Info — aliases to primary (semantic distinction) */
  --info: var(--primary);
  --on-info: var(--on-primary);
  --info-soft: var(--primary-soft);
  --on-info-soft: var(--on-primary-soft);

  /* Active state (derived from hover) */
  --primary-active: var(--primary-hover);

  /* Focus ring */
  --focus-ring: var(--primary);
  --ring: var(--border);

  /* Divider */
  --divider: var(--border);

  /* Selection */
  --bg-selection: var(--primary-soft);
}


/* ================================================================
   SECTION 3: COMPONENT TOKENS — Backgrounds (~35 tokens)
   
   Pattern: --component-prop: var(--component-prop-override, FALLBACK);
   Override var is never set by default — it exists solely for
   per-client customization injected by the manager.
   ================================================================ */

:root {

  /* --- Card --- */
  --card-bg: var(--card-bg-override, var(--bg-surface));
  --card-header-bg: var(--card-header-bg-override, var(--bg-surface-alt));
  --card-footer-bg: var(--card-footer-bg-override, var(--bg-surface-alt));

  /* --- Dropdown --- */
  --dropdown-bg: var(--dropdown-bg-override, var(--bg-elevated));

  /* --- Modal --- */
  --modal-bg: var(--modal-bg-override, var(--bg-elevated));
  --modal-header-bg: var(--modal-header-bg-override, var(--bg-surface-alt));
  --modal-footer-bg: var(--modal-footer-bg-override, var(--bg-surface-alt));

  /* --- Tooltip --- */
  --tooltip-bg: var(--tooltip-bg-override, var(--bg-elevated));

  /* --- Table --- */
  --table-header-bg: var(--table-header-bg-override, var(--bg-surface-alt));
  --table-row-bg: var(--table-row-bg-override, var(--bg-surface));
  --table-row-alt-bg: var(--table-row-alt-bg-override, var(--bg-surface-alt));

  /* --- Accordion --- */
  --accordion-header-bg: var(--accordion-header-bg-override, var(--bg-surface));
  --accordion-header-hover-bg: var(--accordion-header-hover-bg-override, var(--bg-surface-alt));
  --accordion-content-bg: var(--accordion-content-bg-override, var(--bg-surface));

  /* --- Tabs --- */
  --tab-bg: var(--tab-bg-override, transparent);
  --tab-active-bg: var(--tab-active-bg-override, var(--bg-surface));
  --tab-hover-bg: var(--tab-hover-bg-override, var(--bg-surface-alt));

  /* --- Testimonial --- */
  --testimonial-bg: var(--testimonial-bg-override, var(--bg-surface));

  /* --- Pricing --- */
  --pricing-header-bg: var(--pricing-header-bg-override, var(--bg-surface-alt));
  --pricing-featured-bg: var(--pricing-featured-bg-override, var(--primary-soft));

  /* --- Calendar --- */
  --calendar-bg: var(--calendar-bg-override, var(--bg-surface));
  --calendar-header-bg: var(--calendar-header-bg-override, var(--bg-surface-alt));

  /* --- Toast --- */
  --toast-bg: var(--toast-bg-override, var(--bg-elevated));

  /* --- Quote / Code --- */
  --quote-bg: var(--quote-bg-override, var(--bg-surface-alt));
  --code-bg: var(--code-bg-override, var(--bg-surface-alt));
  --code-block-bg: var(--code-block-bg-override, var(--bg-surface-alt));

  /* --- Skeleton --- */
  --skeleton-bg: var(--skeleton-bg-override, var(--bg-surface-alt));

  /* --- Progress --- */
  --progress-bg: var(--progress-bg-override, var(--bg-surface-alt));

  /* --- Avatar --- */
  --avatar-bg: var(--avatar-bg-override, var(--primary-soft));

  /* --- Section-level --- */
  --section-alt-bg: var(--section-alt-bg-override, var(--bg-surface-alt));
  --section-accent-bg: var(--section-accent-bg-override, var(--primary));
  --cta-bg: var(--cta-bg-override, var(--primary));

  /* --- Hero overlays --- */
  --hero-overlay-start: var(--hero-overlay-start-override, rgba(0, 0, 0, 0.5));
  --hero-overlay-end: var(--hero-overlay-end-override, rgba(0, 0, 0, 0.7));
}


/* ================================================================
   SECTION 4: COMPONENT TOKENS — Text / Foreground (~18 tokens)
   ================================================================ */

:root {
  --card-fg: var(--card-fg-override, var(--text-primary));
  --tooltip-fg: var(--tooltip-fg-override, var(--text-inverted));
  --table-header-fg: var(--table-header-fg-override, var(--text-primary));
  --tab-fg: var(--tab-fg-override, var(--text-secondary));
  --tab-active-fg: var(--tab-active-fg-override, var(--text-primary));
  --toast-fg: var(--toast-fg-override, var(--text-primary));
  --section-accent-fg: var(--section-accent-fg-override, var(--on-primary));
  --cta-fg: var(--cta-fg-override, var(--on-primary));
  --avatar-fg: var(--avatar-fg-override, var(--on-primary-soft));
  --code-fg: var(--code-fg-override, var(--text-primary));

  /* Breadcrumb */
  --breadcrumb-fg: var(--breadcrumb-fg-override, var(--text-muted));
  --breadcrumb-active-fg: var(--breadcrumb-active-fg-override, var(--text-primary));

  /* Pagination */
  --pagination-fg: var(--pagination-fg-override, var(--text-primary));
  --pagination-active-fg: var(--pagination-active-fg-override, var(--on-primary));
  --pagination-disabled-fg: var(--pagination-disabled-fg-override, var(--text-disabled));

  /* Calendar */
  --calendar-day-selected-fg: var(--calendar-day-selected-fg-override, var(--on-primary));
  --calendar-day-disabled-fg: var(--calendar-day-disabled-fg-override, var(--text-disabled));
  --calendar-day-outside-fg: var(--calendar-day-outside-fg-override, var(--text-muted));
}


/* ================================================================
   SECTION 5: COMPONENT TOKENS — Borders (~13 tokens)
   ================================================================ */

:root {
  --card-border: var(--card-border-override, var(--border));
  --dropdown-border: var(--dropdown-border-override, var(--border));
  --modal-border: var(--modal-border-override, var(--border));
  --tooltip-border: var(--tooltip-border-override, transparent);
  --table-border: var(--table-border-override, var(--border));
  --accordion-border: var(--accordion-border-override, var(--border));
  --testimonial-border: var(--testimonial-border-override, var(--border));
  --pricing-featured-border: var(--pricing-featured-border-override, var(--primary));
  --tab-active-border: var(--tab-active-border-override, var(--primary));
  --toast-border: var(--toast-border-override, var(--border));
  --code-border: var(--code-border-override, var(--border));
  --pagination-border: var(--pagination-border-override, var(--border));
  --quote-border: var(--quote-border-override, var(--primary));
}


/* ================================================================
   SECTION 6: COMPONENT TOKENS — Buttons (~44 tokens)
   
   Four button families: primary, secondary, ghost, danger
   Each has: bg, fg, border, hover*, active*, disabled*
   Plus CTA-specific button tokens.
   ================================================================ */

:root {

  /* --- Button: Primary --- */
  --btn-primary-bg: var(--btn-primary-bg-override, var(--primary));
  --btn-primary-fg: var(--btn-primary-fg-override, var(--on-primary));
  --btn-primary-border: var(--btn-primary-border-override, var(--primary));
  --btn-primary-hover-bg: var(--btn-primary-hover-bg-override, var(--primary-hover));
  --btn-primary-hover-fg: var(--btn-primary-hover-fg-override, var(--btn-primary-fg));
  --btn-primary-hover-border: var(--btn-primary-hover-border-override, var(--primary-hover));
  --btn-primary-active-bg: var(--btn-primary-active-bg-override, var(--primary-active));
  --btn-primary-active-fg: var(--btn-primary-active-fg-override, var(--btn-primary-fg));
  --btn-primary-active-border: var(--btn-primary-active-border-override, var(--btn-primary-active-bg));
  --btn-primary-disabled-bg: var(--btn-primary-disabled-bg-override, var(--bg-surface-alt));
  --btn-primary-disabled-fg: var(--btn-primary-disabled-fg-override, var(--text-disabled));
  --btn-primary-disabled-border: var(--btn-primary-disabled-border-override, var(--border));

  /* --- Button: Secondary --- */
  --btn-secondary-bg: var(--btn-secondary-bg-override, transparent);
  --btn-secondary-fg: var(--btn-secondary-fg-override, var(--text-primary));
  --btn-secondary-border: var(--btn-secondary-border-override, var(--border-strong));
  --btn-secondary-hover-bg: var(--btn-secondary-hover-bg-override, var(--bg-surface-alt));
  --btn-secondary-hover-fg: var(--btn-secondary-hover-fg-override, var(--btn-secondary-fg));
  --btn-secondary-hover-border: var(--btn-secondary-hover-border-override, var(--border-strong));
  --btn-secondary-active-bg: var(--btn-secondary-active-bg-override, var(--bg-surface-alt));
  --btn-secondary-active-fg: var(--btn-secondary-active-fg-override, var(--btn-secondary-fg));
  --btn-secondary-active-border: var(--btn-secondary-active-border-override, var(--btn-secondary-border));
  --btn-secondary-disabled-bg: var(--btn-secondary-disabled-bg-override, transparent);
  --btn-secondary-disabled-fg: var(--btn-secondary-disabled-fg-override, var(--text-disabled));
  --btn-secondary-disabled-border: var(--btn-secondary-disabled-border-override, var(--border));

  /* --- Button: Ghost --- */
  --btn-ghost-bg: var(--btn-ghost-bg-override, transparent);
  --btn-ghost-fg: var(--btn-ghost-fg-override, var(--primary));
  --btn-ghost-border: var(--btn-ghost-border-override, transparent);
  --btn-ghost-hover-bg: var(--btn-ghost-hover-bg-override, var(--primary-soft));
  --btn-ghost-hover-fg: var(--btn-ghost-hover-fg-override, var(--primary-hover));
  --btn-ghost-hover-border: var(--btn-ghost-hover-border-override, transparent);
  --btn-ghost-active-bg: var(--btn-ghost-active-bg-override, var(--primary-soft));
  --btn-ghost-active-fg: var(--btn-ghost-active-fg-override, var(--primary));
  --btn-ghost-active-border: var(--btn-ghost-active-border-override, transparent);
  --btn-ghost-disabled-bg: var(--btn-ghost-disabled-bg-override, transparent);
  --btn-ghost-disabled-fg: var(--btn-ghost-disabled-fg-override, var(--text-disabled));
  --btn-ghost-disabled-border: var(--btn-ghost-disabled-border-override, transparent);

  /* --- Button: Danger --- */
  --btn-danger-bg: var(--btn-danger-bg-override, var(--error));
  --btn-danger-fg: var(--btn-danger-fg-override, var(--on-error));
  --btn-danger-border: var(--btn-danger-border-override, var(--error));
  --btn-danger-hover-bg: var(--btn-danger-hover-bg-override, color-mix(in srgb, var(--error) 85%, black));
  --btn-danger-active-bg: var(--btn-danger-active-bg-override, color-mix(in srgb, var(--error) 75%, black));
  --btn-danger-disabled-bg: var(--btn-danger-disabled-bg-override, var(--bg-surface-alt));
  --btn-danger-disabled-fg: var(--btn-danger-disabled-fg-override, var(--text-disabled));

  /* --- CTA-section buttons (inverted on accent bg) --- */
  --cta-btn-bg: var(--cta-btn-bg-override, var(--bg-surface));
  --cta-btn-fg: var(--cta-btn-fg-override, var(--primary));
}


/* ================================================================
   SECTION 7: COMPONENT TOKENS — Input / Form (~10 tokens)
   ================================================================ */

:root {
  --input-bg: var(--input-bg-override, var(--bg-surface));
  --input-fg: var(--input-fg-override, var(--text-primary));
  --input-placeholder: var(--input-placeholder-override, var(--text-muted));
  --input-border: var(--input-border-override, var(--border));
  --input-hover-border: var(--input-hover-border-override, var(--border-strong));
  --input-focus-border: var(--input-focus-border-override, var(--primary));
  --input-focus-ring: var(--input-focus-ring-override, var(--primary-soft));
  --input-disabled-bg: var(--input-disabled-bg-override, var(--bg-surface-alt));
  --input-disabled-fg: var(--input-disabled-fg-override, var(--text-disabled));
  --input-disabled-border: var(--input-disabled-border-override, var(--border));
}


/* ================================================================
   SECTION 8: COMPONENT TOKENS — Controls: Toggle / Checkbox / Radio (5 tokens)
   ================================================================ */

:root {
  --control-track: var(--control-track-override, var(--bg-surface-alt));
  --control-thumb: var(--control-thumb-override, var(--bg-surface));
  --control-on-track: var(--control-on-track-override, var(--primary));
  --control-on-thumb: var(--control-on-thumb-override, var(--bg-surface));
  --control-disabled: var(--control-disabled-override, var(--bg-surface-alt));
}


/* ================================================================
   SECTION 9: COMPONENT TOKENS — Navigation (~13 tokens)
   ================================================================ */

:root {
  /* --- Header / Navbar --- */
  --nav-bg: var(--nav-bg-override, var(--bg-surface));
  --nav-fg: var(--nav-fg-override, var(--text-primary));
  --nav-border: var(--nav-border-override, var(--border));
  --nav-link: var(--nav-link-override, var(--text-primary));
  --nav-link-hover: var(--nav-link-hover-override, var(--primary));
  --nav-link-active: var(--nav-link-active-override, var(--primary));

  /* --- Footer --- */
  --footer-bg: var(--footer-bg-override, var(--bg-surface-alt));
  --footer-fg: var(--footer-fg-override, var(--text-secondary));
  --footer-border: var(--footer-border-override, var(--border));
  --footer-link: var(--footer-link-override, var(--text-muted));
  --footer-link-hover: var(--footer-link-hover-override, var(--primary));

  /* --- Breadcrumb --- */
  --breadcrumb-hover-fg: var(--breadcrumb-hover-fg-override, var(--primary));
  --breadcrumb-separator: var(--breadcrumb-separator-override, var(--text-muted));
}


/* ================================================================
   SECTION 10: COMPONENT TOKENS — Links (4 tokens)
   ================================================================ */

:root {
  --link: var(--link-override, var(--primary));
  --link-hover: var(--link-hover-override, var(--primary-hover));
  --link-visited: var(--link-visited-override, var(--primary));
  --link-muted: var(--link-muted-override, var(--text-muted));
}


/* ================================================================
   SECTION 11: COMPONENT TOKENS — Icons (6 tokens)
   ================================================================ */

:root {
  --icon-primary: var(--icon-primary-override, var(--text-primary));
  --icon-muted: var(--icon-muted-override, var(--text-muted));
  --icon-disabled: var(--icon-disabled-override, var(--text-disabled));
  --icon-inverted: var(--icon-inverted-override, var(--text-inverted));
  --accordion-icon: var(--accordion-icon-override, var(--text-muted));
  --toast-close-icon: var(--toast-close-icon-override, var(--text-muted));
}


/* ================================================================
   SECTION 12: COMPONENT TOKENS — Badges (~11 tokens)
   ================================================================ */

:root {
  --badge-bg: var(--badge-bg-override, var(--primary-soft));
  --badge-fg: var(--badge-fg-override, var(--on-primary-soft));
  --badge-border: var(--badge-border-override, transparent);
  --badge-success-bg: var(--badge-success-bg-override, var(--success-soft));
  --badge-success-fg: var(--badge-success-fg-override, var(--on-success-soft));
  --badge-warning-bg: var(--badge-warning-bg-override, var(--warning-soft));
  --badge-warning-fg: var(--badge-warning-fg-override, var(--on-warning-soft));
  --badge-error-bg: var(--badge-error-bg-override, var(--error-soft));
  --badge-error-fg: var(--badge-error-fg-override, var(--on-error-soft));
  --badge-info-bg: var(--badge-info-bg-override, var(--info-soft));
  --badge-info-fg: var(--badge-info-fg-override, var(--on-info-soft));
}


/* ================================================================
   SECTION 13: COMPONENT TOKENS — Alerts (~12 tokens)
   ================================================================ */

:root {
  --alert-success-bg: var(--alert-success-bg-override, var(--success-soft));
  --alert-success-border: var(--alert-success-border-override, var(--success));
  --alert-success-icon: var(--alert-success-icon-override, var(--success));
  --alert-warning-bg: var(--alert-warning-bg-override, var(--warning-soft));
  --alert-warning-border: var(--alert-warning-border-override, var(--warning));
  --alert-warning-icon: var(--alert-warning-icon-override, var(--warning));
  --alert-error-bg: var(--alert-error-bg-override, var(--error-soft));
  --alert-error-border: var(--alert-error-border-override, var(--error));
  --alert-error-icon: var(--alert-error-icon-override, var(--error));
  --alert-info-bg: var(--alert-info-bg-override, var(--info-soft));
  --alert-info-border: var(--alert-info-border-override, var(--info));
  --alert-info-icon: var(--alert-info-icon-override, var(--info));
}


/* ================================================================
   SECTION 14: COMPONENT TOKENS — Progress (5 tokens)
   ================================================================ */

:root {
  --progress-fill: var(--progress-fill-override, var(--primary));
  --progress-success-fill: var(--progress-success-fill-override, var(--success));
  --progress-warning-fill: var(--progress-warning-fill-override, var(--warning));
  --progress-error-fill: var(--progress-error-fill-override, var(--error));
}


/* ================================================================
   SECTION 15: COMPONENT TOKENS — Rating (3 tokens)
   ================================================================ */

:root {
  --rating-empty: var(--rating-empty-override, var(--border));
  --rating-filled: var(--rating-filled-override, #FBBF24);
  --rating-hover: var(--rating-hover-override, #F59E0B);
}


/* ================================================================
   SECTION 16: COMPONENT TOKENS — Step Indicator (8 tokens)
   ================================================================ */

:root {
  --step-complete-bg: var(--step-complete-bg-override, var(--success));
  --step-complete-fg: var(--step-complete-fg-override, var(--on-success));
  --step-active-bg: var(--step-active-bg-override, var(--primary));
  --step-active-fg: var(--step-active-fg-override, var(--on-primary));
  --step-pending-bg: var(--step-pending-bg-override, var(--bg-surface-alt));
  --step-pending-fg: var(--step-pending-fg-override, var(--text-muted));
  --step-connector: var(--step-connector-override, var(--border));
  --step-connector-complete: var(--step-connector-complete-override, var(--success));
}


/* ================================================================
   SECTION 17: COMPONENT TOKENS — Calendar (3 bg tokens)
   (fg tokens in Section 4 above)
   ================================================================ */

:root {
  --calendar-day-hover-bg: var(--calendar-day-hover-bg-override, var(--bg-surface-alt));
  --calendar-day-selected-bg: var(--calendar-day-selected-bg-override, var(--primary));
  --calendar-day-today-border: var(--calendar-day-today-border-override, var(--primary));
}


/* ================================================================
   SECTION 18: COMPONENT TOKENS — Overlays & Gradients (7 tokens)
   ================================================================ */

:root {
  --overlay-dark: var(--overlay-dark-override, rgba(0, 0, 0, 0.5));
  --overlay-light: var(--overlay-light-override, rgba(255, 255, 255, 0.5));
  --overlay-primary: var(--overlay-primary-override, color-mix(in srgb, var(--primary) 80%, transparent));
  --overlay-gradient: var(--overlay-gradient-override, linear-gradient(180deg, transparent 0%, var(--bg-body) 100%));

  --gradient-primary: var(--gradient-primary-override, linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%));
  --gradient-accent: var(--gradient-accent-override, linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%));
  --gradient-subtle: var(--gradient-subtle-override, linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-alt) 100%));
}


/* ================================================================
   SECTION 19: COMPONENT TOKENS — Shadows (5 tokens)
   ================================================================ */

:root {
  --card-shadow: var(--card-shadow-override, var(--shadow-sm));
  --card-hover-shadow: var(--card-hover-shadow-override, var(--shadow-md));
  --dropdown-shadow: var(--dropdown-shadow-override, var(--shadow-lg));
  --modal-shadow: var(--modal-shadow-override, var(--shadow-lg));
  --toast-shadow: var(--toast-shadow-override, var(--shadow-md));
}


/* ================================================================
   SECTION 20: COMPONENT TOKENS — Scrollbar (3 tokens)
   ================================================================ */

:root {
  --scrollbar-track: var(--scrollbar-track-override, var(--bg-surface-alt));
  --scrollbar-thumb: var(--scrollbar-thumb-override, var(--border-strong));
  --scrollbar-thumb-hover: var(--scrollbar-thumb-hover-override, var(--text-muted));
}


/* ================================================================
   SECTION 21: COMPONENT TOKENS — Miscellaneous UI (~18 tokens)
   ================================================================ */

:root {
  /* Skeleton loader */
  --skeleton-shimmer: var(--skeleton-shimmer-override, var(--bg-surface));

  /* Highlight / search */
  --highlight-bg: var(--highlight-bg-override, var(--warning-soft));
  --highlight-fg: var(--highlight-fg-override, var(--text-primary));

  /* Avatar */
  --avatar-border: var(--avatar-border-override, var(--bg-surface));
  --avatar-group-border: var(--avatar-group-border-override, var(--bg-surface));

  /* Testimonial */
  --testimonial-quote-mark: var(--testimonial-quote-mark-override, var(--primary-soft));

  /* Pricing */
  --pricing-feature-check: var(--pricing-feature-check-override, var(--success));

  /* Dropdown items */
  --dropdown-item-hover-bg: var(--dropdown-item-hover-bg-override, var(--bg-surface-alt));
  --dropdown-item-active-bg: var(--dropdown-item-active-bg-override, var(--primary-soft));

  /* Pagination */
  --pagination-bg: var(--pagination-bg-override, transparent);
  --pagination-hover-bg: var(--pagination-hover-bg-override, var(--bg-surface-alt));
  --pagination-active-bg: var(--pagination-active-bg-override, var(--primary));

  /* Table */
  --table-hover-bg: var(--table-hover-bg-override, var(--bg-surface-alt));

  /* Code block */
  --code-block-header-bg: var(--code-block-header-bg-override, var(--bg-surface-alt));
}


/* ================================================================
   SECTION 22: SECTION BACKGROUND SYSTEM

   MOVED TO 60-backgrounds.css (Phase 2.75 refactor, Stage 2).
   All .section--bg-* and .hero--bg-* classes are now defined in
   60-backgrounds.css along with the full universal background system.
   ================================================================ */


/* ================================================================
   SECTION 23: COMPONENT TOKENS — Border Radius (7 tokens)
   ================================================================ */

:root {
  --radius-sm: var(--radius-sm-override, 0.125rem);
  /* 2px */
  --radius-default: var(--radius-default-override, 0.25rem);
  /* 4px */
  --radius-md: var(--radius-md-override, 0.375rem);
  /* 6px */
  --radius-lg: var(--radius-lg-override, 0.5rem);
  /* 8px */
  --radius-xl: var(--radius-xl-override, 0.75rem);
  /* 12px */
  --radius-2xl: var(--radius-2xl-override, 1rem);
  /* 16px */
  --radius-full: var(--radius-full-override, 9999px);
}


/* ================================================================
   SECTION 26: COMPONENT TOKENS — Spacing Scale (10 tokens)

   Base: 4px (0.25rem) x multiplier
   --space-1 =  4px   --space-2 =  8px   --space-3 = 12px
   --space-4 = 16px   --space-5 = 20px   --space-6 = 24px
   --space-7 = 28px   --space-8 = 32px   --space-10 = 40px
   --space-12 = 48px
   ================================================================ */

:root {
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
}


/* ================================================================
   SECTION 27: COMPONENT TOKENS — Extended Shadows (2 tokens)
   ================================================================ */

:root {
  --shadow-xl:  0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
  --shadow-2xl: 0 25px 50px -12px var(--shadow-color);
}


/* ================================================================
   SECTION 24: COMPONENT TOKENS — Z-Index (7 tokens)
   ================================================================ */

:root {
  /* Navigation height */
  --nav-height: var(--nav-height-override, 4.5rem); /* 72px */

  --z-dropdown: var(--z-dropdown-override, 100);
  --z-sticky: var(--z-sticky-override, 200);
  --z-fixed: var(--z-fixed-override, 300);
  --z-modal-backdrop: var(--z-modal-backdrop-override, 400);
  --z-modal: var(--z-modal-override, 500);
  --z-popover: var(--z-popover-override, 600);
  --z-tooltip: var(--z-tooltip-override, 700);
}


/* ================================================================
   SECTION 25: COMPONENT TOKENS — Animation (4 tokens)
   ================================================================ */

:root {
  --duration-fast: var(--duration-fast-override, 150ms);
  --duration-normal: var(--duration-normal-override, 300ms);
  --duration-slow: var(--duration-slow-override, 500ms);
  --ease-in-out: var(--ease-in-out-override, cubic-bezier(0.4, 0, 0.2, 1));
}