/* ========================================================================
   * Component: Alert
   * ======================================================================== */
.dig-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  border-radius: var(--dig-radius-lg);
  border: 1px solid var(--dig-color-info-border);
  background-color: var(--dig-color-info-bg);
  color: var(--dig-color-info-text);
}
.dig-alert--success {
  background-color: var(--dig-color-success-bg);
  border-color: var(--dig-color-success-border);
  color: var(--dig-color-success-text);
}
.dig-alert--warning {
  background-color: var(--dig-color-warning-bg);
  border-color: var(--dig-color-warning-border);
  color: var(--dig-color-warning-text);
}
.dig-alert--danger {
  background-color: var(--dig-color-danger-bg);
  border-color: var(--dig-color-danger-border);
  color: var(--dig-color-danger-text);
}

.dig-alert__icon {
  flex-shrink: 0;
  margin-top: 2px; /* Small adjustment for better visual alignment */
}
.dig-alert__icon .dashicons {
  color: inherit;
}

.dig-alert__message {
  flex-grow: 1;
  line-height: 1.5;
}
.dig-alert__message > *:first-child {
  margin-top: 0;
}
.dig-alert__message > *:last-child {
  margin-bottom: 0;
}

.dig-alert__actions {
  margin-left: auto; /* Pushes the close button to the far right */
}
.dig-alert__close-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity var(--dig-transition-fast);
}
.dig-alert__close-btn:hover {
  opacity: 1;
}

/*
 * UCA Component: d1:collection (v2.0 - UI Polished & Icon-driven)
 * Base styles for the smart repeater component.
 */
.dig-collection__rows-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--dig-spacing-md);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-lg);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg-alt);
}
.dig-collection__row {
  display: flex;
  align-items: center; /* Vertically align controls with content */
  gap: var(--dig-spacing-sm);
  padding: var(--dig-spacing-md);
  background-color: var(--dig-color-bg);
  border: 1px solid var(--dig-color-border);
  border-radius: var(--dig-radius-md);
  transition: box-shadow var(--dig-transition-fast),
    transform var(--dig-transition-fast);
}
.dig-collection__row.sortable-ghost {
  opacity: 0.4;
  background: var(--dig-color-primary-bg);
}
.dig-collection__row.sortable-chosen {
  box-shadow: var(--dig-shadow-lg);
  transform: scale(1.02);
}
.dig-collection__row-content {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--dig-spacing-md);
}
.dig-collection__row-controls {
  display: flex;
  align-items: center;
  gap: var(--dig-spacing-xs);
}
.dig-collection__drag-handle,
.dig-collection__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent; /* Make border transparent by default */
  background-color: transparent; /* Make background transparent */
  border-radius: var(--dig-radius-sm);
  padding: var(--dig-spacing-xs);
  cursor: pointer;
  transition: background-color var(--dig-transition-fast),
    color var(--dig-transition-fast);
  color: var(--dig-color-text-muted); /* Muted color for icons */
}

.dig-collection__drag-handle {
  cursor: move;
}
.dig-collection__drag-handle:hover {
  background-color: var(--dig-color-bg-alt);
  color: var(--dig-color-text);
}

/* Specific styling for the remove button */
.dig-collection__remove-btn:hover {
  background-color: var(--dig-color-danger-bg);
  color: var(--dig-color-danger);
}

.dig-collection__actions {
  margin-top: var(--dig-spacing-md);
}

/* === Password Component - Enterprise Grade Styles === */

.dig-password-field-wrapper .dig-confirmation-group {
  margin-top: var(--dig-spacing-md);
}

/* Strength Meter Enhancements */
.dig-strength-meter {
  margin-top: var(--dig-spacing-xs);
  background-color: var(--dig-color-bg-alt);
  border-radius: var(--dig-radius-sm);
  overflow: hidden;
  transition: all 0.3s ease;
}

.dig-password-field-wrapper.has-weak-password .dig-strength-meter {
  box-shadow: 0 0 0 1px var(--dig-color-danger);
}

.dig-password-field-wrapper.has-strong-password .dig-strength-meter {
  box-shadow: 0 0 0 1px var(--dig-color-success);
}

.dig-strength-meter-bar {
  height: 6px;
  width: 0%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--dig-color-border);
  transform-origin: left;
}

.dig-strength-meter-bar.is-strength-1 {
  background-color: var(--dig-color-danger);
  width: 25%;
}

.dig-strength-meter-bar.is-strength-2 {
  background-color: var(--dig-color-warning);
  width: 50%;
}

.dig-strength-meter-bar.is-strength-3 {
  background-color: var(--dig-color-info);
  width: 75%;
}

.dig-strength-meter-bar.is-strength-4 {
  background-color: var(--dig-color-success);
  width: 100%;
}

.dig-strength-meter-text {
  font-size: var(--dig-font-size-small);
  color: var(--dig-color-text-muted);
  padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
  margin: 0;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* Toggle Button Excellence */
.dig-icon-button.dig-password-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--dig-spacing-xs);
  color: var(--dig-color-text-muted);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dig-radius-sm);
  position: relative;
  overflow: hidden;
}

.dig-icon-button.dig-password-toggle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
}

.dig-icon-button.dig-password-toggle:hover::before {
  opacity: 0.1;
}

.dig-icon-button.dig-password-toggle:focus {
  outline: 2px solid var(--dig-color-primary);
  outline-offset: 1px;
}

.dig-icon-button.dig-password-toggle:hover {
  color: var(--dig-color-primary);
  transform: translateY(-1px);
}

.dig-icon-button.dig-password-toggle:active {
  transform: translateY(0);
}

/* Dashicon Perfection */
.dig-password-toggle-icon {
  font-family: "dashicons";
  font-size: 20px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
}

.dig-icon-button.dig-password-toggle:hover .dig-password-toggle-icon {
  transform: scale(1.1);
}

.dig-password-toggle-icon.is-visible::before {
  content: "\f177";
}

.dig-password-toggle-icon.is-hidden::before {
  content: "\f530";
}

@supports not (font-family: "dashicons") {
  .dig-password-toggle-icon {
    font-family: system-ui, sans-serif;
    font-size: 18px;
  }
}

/* Focus indicators for accessibility */
.dig-password-field-wrapper:focus-within {
  position: relative;
}

/* Responsive considerations */
@media (max-width: 768px) {
  .dig-password-toggle-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  .dig-icon-button.dig-password-toggle {
    padding: var(--dig-spacing-xxs);
  }
}

/* ==========================================================================
   digentus-one.css - Complete UI Base Stylesheet for Web API Native Architecture
   ==========================================================================
   Purpose: Declarative, accessible, semantic, and responsive stylesheet
   to be used alongside Digentus One UI rendered entirely with Web APIs.
   Includes full support for: CSS Variables, Dark Mode, Reduced Motion,
   Container Queries, Cascade Layers, Scroll Snap, Viewport Units, 
   Subgrid, Anchor Positioning, and all modern Web APIs.
   ==========================================================================
*/

/* ==========================================================================
   0. Cascade Layers Setup
   ==========================================================================
*/

@layer base, components, themes, utilities, animations, admin;

/* ==========================================================================
   2. Layer 'base'
   ========================================================================== */
@layer base {
  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/montserrat-v30-latin-regular.woff2) format("woff2");
  }

  @font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/montserrat-v30-latin-700.woff2) format("woff2");
  }

  /*
  @font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400; /* o los pesos que uses */
  /*font-display: swap;
    src: url("../fonts/open-sans-vxx-latin-regular.woff2") format("woff2");
  }
  */

  /**
 * =========================================================================
 * Root Variable Definitions (Light Theme - Default)
 * =========================================================================
 * This is the single source of truth for the design system tokens.
 * It defines the color palette using HSL for dynamic manipulation and
 * includes the auto-contrast logic. All other system variables like
 * typography, spacing, etc., are also defined here.
 */
  /**
 * =========================================================================
 * Root Variable Definitions (Light Theme - Default)
 * =========================================================================
 * This is the single source of truth for the design system tokens.
 * It defines the color palette using HSL for dynamic manipulation and
 * includes the auto-contrast logic. All other system variables like
 * typography, spacing, etc., are also defined here.
 */
  /**
   * =========================================================================
   * Root Variable Definitions (Refactored with HSL & Auto-Contrast Logic)
   * =========================================================================
   */
  :root {
    /* --- A) HSL Color Primitives (Unit-less Lightness Version) ---
       All lightness values are now unit-less numbers between 0 and 1.
       This is the key to making mathematical calculations 100% reliable. */
    --dig-hue-primary: 235;
    --dig-saturation-primary: 100%;
    --dig-lightness-primary: 0.09; /* was 9% */

    --dig-hue-secondary: 66;
    --dig-saturation-secondary: 99%;
    --dig-lightness-secondary: 0.5; /* was 50% */

    --dig-hue-accent: 183;
    --dig-saturation-accent: 73%;
    --dig-lightness-accent: 0.45; /* was 45% */

    --dig-hue-success: 158;
    --dig-saturation-success: 64%;
    --dig-lightness-success: 0.45; /* Example: A nice green */

    --dig-hue-warning: 45;
    --dig-saturation-warning: 100%;
    --dig-lightness-warning: 0.5; /* Example: A bright yellow */

    --dig-hue-danger: 0;
    --dig-saturation-danger: 84%;
    --dig-lightness-danger: 0.6; /* Example: A strong red */

    --dig-hue-info: 210;
    --dig-saturation-info: 100%;
    --dig-lightness-info: 0.5; /* Example: A clear blue */

    --dig-hue-text: 0;
    --dig-saturation-text: 0%;
    --dig-lightness-text: 0.2; /* was 20% (#333) */

    --dig-hue-light: 0;
    --dig-saturation-light: 0%;
    --dig-lightness-light: 1; /* was 100% (#fff) */

    --dig-hue-muted: 210;
    --dig-saturation-muted: 16%;
    --dig-lightness-muted: 0.68; /* was 68% */

    --dig-hue-bg: 0;
    --dig-saturation-bg: 0%;
    --dig-lightness-bg: 1; /* was 100% */

    --dig-hue-bg-alt: 210;
    --dig-saturation-bg-alt: 33%;
    --dig-lightness-bg-alt: 0.97; /* A very light grey-blue */

    --dig-hue-border: 0;
    --dig-saturation-border: 0%;
    --dig-lightness-border: 0.87; /* was 80% */

    /*
     * -----------------------------------------------------------------------
     * B) Composite Color Variables (Reconstructing Percentage)
     * -----------------------------------------------------------------------
     * We reconstruct the final percentage value ONLY when passing it to the hsl() function.
     * This keeps all intermediate calculations pure and unit-less.
     */

    /* Brand Colors */
    --dig-color-primary: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc(var(--dig-lightness-primary) * 100%)
    );
    --dig-color-primary-light: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc((var(--dig-lightness-primary) + 0.1) * 100%)
    );
    --dig-color-primary-dark: hsl(
      var(--dig-hue-primary),
      var(--dig-saturation-primary),
      calc((var(--dig-lightness-primary) - 0.05) * 100%)
    );

    --dig-color-secondary: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc(var(--dig-lightness-secondary) * 100%)
    );
    --dig-color-secondary-light: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc((var(--dig-lightness-secondary) + 0.1) * 100%)
    );
    --dig-color-secondary-dark: hsl(
      var(--dig-hue-secondary),
      var(--dig-saturation-secondary),
      calc((var(--dig-lightness-secondary) - 0.1) * 100%)
    );

    --dig-color-accent: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc(var(--dig-lightness-accent) * 100%)
    );
    --dig-color-accent-light: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc((var(--dig-lightness-accent) + 0.15) * 100%)
    );
    --dig-color-accent-dark: hsl(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc((var(--dig-lightness-accent) - 0.15) * 100%)
    );

    /* Semantic Colors */
    --dig-color-success: hsl(
      var(--dig-hue-success),
      var(--dig-saturation-success),
      calc(var(--dig-lightness-success) * 100%)
    );
    --dig-color-warning: hsl(
      var(--dig-hue-warning),
      var(--dig-saturation-warning),
      calc(var(--dig-lightness-warning) * 100%)
    );
    --dig-color-danger: hsl(
      var(--dig-hue-danger),
      var(--dig-saturation-danger),
      calc(var(--dig-lightness-danger) * 100%)
    );
    --dig-color-info: hsl(
      var(--dig-hue-info),
      var(--dig-saturation-info),
      calc(var(--dig-lightness-info) * 100%)
    );

    --dig-color-white {
      color: #fff;
    }

    /* --- Alert Background & Border Colors ---
       We create dedicated variables for the alert states.
       They use a very low lightness and saturation for a subtle background tint.
    */
    --dig-color-success-bg: hsl(var(--dig-hue-success), 90%, 95%);
    --dig-color-success-border: hsl(var(--dig-hue-success), 90%, 85%);
    --dig-color-success-text: hsl(var(--dig-hue-success), 80%, 25%);

    --dig-color-warning-bg: hsl(var(--dig-hue-warning), 100%, 95%);
    --dig-color-warning-border: hsl(var(--dig-hue-warning), 100%, 85%);
    --dig-color-warning-text: hsl(var(--dig-hue-warning), 90%, 30%);

    --dig-color-danger-bg: hsl(var(--dig-hue-danger), 100%, 95%);
    --dig-color-danger-border: hsl(var(--dig-hue-danger), 100%, 85%);
    --dig-color-danger-text: hsl(var(--dig-hue-danger), 80%, 35%);

    --dig-color-info-bg: hsl(var(--dig-hue-info), 100%, 95%);
    --dig-color-info-border: hsl(var(--dig-hue-info), 100%, 85%);
    --dig-color-info-text: hsl(var(--dig-hue-info), 80%, 30%);

    /* Neutral & UI Colors */
    --dig-color-text: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      calc(var(--dig-lightness-text) * 100%)
    );
    --dig-color-text-light: hsl(
      var(--dig-hue-light),
      var(--dig-saturation-light),
      calc(var(--dig-lightness-light) * 100%)
    );
    --dig-color-text-muted: hsl(
      var(--dig-hue-muted),
      var(--dig-saturation-muted),
      calc(var(--dig-lightness-muted) * 100%)
    );

    --dig-color-bg: hsl(
      var(--dig-hue-bg),
      var(--dig-saturation-bg),
      calc(var(--dig-lightness-bg) * 100%)
    );
    --dig-color-bg-alt: hsl(
      var(--dig-hue-bg-alt),
      var(--dig-saturation-bg-alt),
      calc(var(--dig-lightness-bg-alt) * 100%)
    );

    --dig-color-border: hsl(
      var(--dig-hue-border),
      var(--dig-saturation-border),
      calc(var(--dig-lightness-border) * 100%)
    );
    --dig-color-border-subtle: hsla(
      var(--dig-hue-border),
      var(--dig-saturation-border),
      calc(var(--dig-lightness-border) * 100%),
      0.5
    );

    /* Special Colors with Alpha Channel */
    --dig-color-focus-ring: hsla(
      var(--dig-hue-accent),
      var(--dig-saturation-accent),
      calc(var(--dig-lightness-accent) * 100%),
      0.35
    );

    /* --- C) Automatic Contrast Logic ("The Brain") - Bulletproof Version --- */
    --contrast-threshold: 0.6; /* Unit-less threshold (60%) */

    /* --bg-lightness will be set by components (e.g., a button) as a unit-less value */
    --is-light: clamp(
      0,
      (var(--bg-lightness, 0) - var(--contrast-threshold)) * 9999,
      1
    );

    /* This formula now calculates the final LIGHTNESS value as a unit-less number (e.g., 0.20 or 1.0) */
    --auto-contrast-lightness: calc(
      (var(--is-light) * var(--dig-lightness-text)) +
        ((1 - var(--is-light)) * var(--dig-lightness-light))
    );

    /*
     * -----------------------------------------------------------------------
     * D) Non-Color System Variables (The Design System Foundation)
     * -----------------------------------------------------------------------
     * This section defines all other foundational design tokens for the UI,
     * including typography, fluid spacing, border radii, transitions,
     * layout dimensions, responsive breakpoints, shadows, and z-index stacking.
     * These variables are used by all components to ensure a consistent
     * and maintainable visual system.
     */

    /* Typography */
    --dig-font-primary: "Montserrat", system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --dig-font-secondary: "Open Sans", system-ui, -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --dig-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;

    /* Fluid Typography Scale using clamp() for responsive font sizes */
    --dig-font-size-base: clamp(
      1rem,
      0.95rem + 0.25vw,
      1.125rem
    ); /* Scales from 16px to 18px */
    --dig-font-size-small: clamp(
      0.875rem,
      0.825rem + 0.25vw,
      1rem
    ); /* Scales from 14px to 16px */
    --dig-font-size-h6: var(--dig-font-size-base);
    --dig-font-size-h5: clamp(
      1.25rem,
      1.15rem + 0.5vw,
      1.5rem
    ); /* Scales from 20px to 24px */
    --dig-font-size-h4: clamp(
      1.563rem,
      1.4rem + 0.81vw,
      2rem
    ); /* Scales from 25px to 32px */
    --dig-font-size-h3: clamp(
      1.953rem,
      1.7rem + 1.27vw,
      2.66rem
    ); /* Scales from 31px to 42.5px */
    --dig-font-size-h2: clamp(
      2.441rem,
      2.1rem + 1.71vw,
      3.55rem
    ); /* Scales from 39px to 57px */
    --dig-font-size-h1: clamp(
      3.052rem,
      2.6rem + 2.26vw,
      4.73rem
    ); /* Scales from 49px to 75.5px */

    /* Spacing System (Fluid) using clamp() for responsive gutters and margins */
    --dig-spacing-xxs: clamp(
      0.25rem,
      0.2rem + 0.25vw,
      0.375rem
    ); /* ~4px to 6px */
    --dig-spacing-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); /* ~8px to 12px */
    --dig-spacing-sm: clamp(
      0.75rem,
      0.6rem + 0.75vw,
      1.125rem
    ); /* ~12px to 18px */
    --dig-spacing-md: clamp(
      1.5rem,
      1.2rem + 1.5vw,
      2.25rem
    ); /* ~24px to 36px */
    --dig-spacing-lg: clamp(
      2.25rem,
      1.8rem + 2.25vw,
      3.375rem
    ); /* ~36px to 54px */
    --dig-spacing-xl: clamp(3rem, 2.4rem + 3vw, 4.5rem); /* ~48px to 72px */
    --dig-form-grid-gap: var(--dig-spacing-md);

    --dig-form-control-padding: var(--dig-spacing-xs);
    --dig-form-control-margin: 0;

    /* Border Radius */
    --dig-radius-xs: 2px;
    --dig-radius-sm: 4px;
    --dig-radius-md: 8px;
    --dig-radius-lg: 16px;
    --dig-radius-full: 9999px; /* A large value to ensure perfect circles/pills */

    /* Transitions & Animations */
    --dig-transition-fast: 0.15s ease-in-out;
    --dig-transition-base: 0.3s ease-in-out;
    --dig-transition-slow: 0.5s ease-in-out;
    --dig-animation-duration: 0.5s;

    /* Layout & Sizing */
    --dig-sidebar-width: 350px;
    --dig-container-max-width: 1440px;
    --dig-text-max-width: 65ch; /* Ideal line length for readability */
    --dig-header-height: 80px;
    --dig-footer-height: 120px;

    /* Responsive Breakpoints */
    --dig-breakpoint-sm: 576px;
    --dig-breakpoint-md: 768px;
    --dig-breakpoint-lg: 992px;
    --dig-breakpoint-xl: 1200px;

    /* Shadows (Subtle and layered) */
    --dig-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dig-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --dig-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --dig-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Z-index Stack (Manages layering of UI elements) */
    --dig-z-index-dropdown: 1000;
    --dig-z-index-sticky: 1020;
    --dig-z-index-fixed: 1030;
    --dig-z-index-modal-backdrop: 1040;
    --dig-z-index-modal: 1050;
    --dig-z-index-popover: 1070;
    --dig-z-index-tooltip: 1080;
    --dig-z-index-toast: 1090;
  }

  /*
   * ========================================================================
   * Dark Mode Theme Overrides (Refactored with HSL Primitives)
   * ========================================================================
   * Instead of redefining every final color, we only change the primitive
   * HSL values. All composite variables (`--dig-color-*`) and the
   * auto-contrast logic will automatically recalculate based on these new
   * primitives. This is the core of the theming system.
   */
  @media (prefers-color-scheme: dark) {
    :root {
      /* ========================================================================
     * DARK MODE THEME OVERRIDES (Consistent Unit-less Lightness Values)
     * ========================================================================
     * All --dig-lightness-* variables maintain unit-less 0-1 format for
     * consistent HSL calculations and auto-contrast system compatibility.
     * ========================================================================
     */

      /* --- BRAND COLORS --- */
      --dig-hue-primary: 200;
      --dig-saturation-primary: 100%;
      --dig-lightness-primary: 0.67; /* #57ceff */

      --dig-hue-secondary: 74;
      --dig-saturation-secondary: 100%;
      --dig-lightness-secondary: 0.5; /* #d4ff00 */

      --dig-hue-accent: 184;
      --dig-saturation-accent: 81%;
      --dig-lightness-accent: 0.56; /* #33e0eb */

      /* --- SEMANTIC COLORS --- */
      --dig-hue-success: 160;
      --dig-saturation-success: 68%;
      --dig-lightness-success: 0.54; /* #38d9a9 */

      --dig-hue-warning: 46;
      --dig-saturation-warning: 100%;
      --dig-lightness-warning: 0.61; /* #ffd43b */

      --dig-hue-danger: 0;
      --dig-saturation-danger: 100%;
      --dig-lightness-danger: 0.71; /* #ff6b6b */

      --dig-hue-info: 184;
      --dig-saturation-info: 65%;
      --dig-lightness-info: 0.59; /* #4dd0e1 */

      /* --- NEUTRAL & TEXT COLORS --- */
      --dig-hue-text: 0;
      --dig-saturation-text: 0%;
      --dig-lightness-text: 0.88; /* #e1e1e1 */

      --dig-hue-light: 210;
      --dig-saturation-light: 14%;
      --dig-lightness-light: 0.97; /* #f8f9fa */

      --dig-hue-muted: 210;
      --dig-saturation-muted: 16%;
      --dig-lightness-muted: 0.68; /* #adb5bd */

      --dig-hue-border: 0;
      --dig-saturation-border: 0%;
      --dig-lightness-border: 0.27; /* #444444 */

      /* --- BACKGROUND COLORS --- */
      --dig-hue-bg: 0;
      --dig-saturation-bg: 0%;
      --dig-lightness-bg: 0.07; /* #121212 */

      --dig-hue-bg-alt: 0;
      --dig-saturation-bg-alt: 0%;
      --dig-lightness-bg-alt: 0.12; /* #1e1e1e */

      /* --- SHADOW OVERRIDES (Enhanced for dark backgrounds) --- */
      --dig-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4),
        0 1px 1px 0 rgba(0, 0, 0, 0.3);

      --dig-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
        0 2px 4px -2px rgba(0, 0, 0, 0.4);

      --dig-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6),
        0 4px 6px -4px rgba(0, 0, 0, 0.5);

      --dig-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7),
        0 8px 10px -6px rgba(0, 0, 0, 0.6);

      /* --- FOCUS RING ENHANCEMENT (Better visibility in dark mode) --- */
      --dig-color-focus-ring: hsla(
        var(--dig-hue-accent),
        var(--dig-saturation-accent),
        calc(var(--dig-lightness-accent) * 100%),
        0.5 /* Increased opacity for better visibility */
      );
    }

    /* ========================================================================
   * DARK MODE SPECIFIC ENHANCEMENTS
   * ========================================================================
   */

    /* Improved focus visibility in dark mode */
    :focus-visible {
      outline-color: var(--dig-color-accent-light);
      outline-width: 3px; /* Thicker outline for better contrast */
    }

    /* Enhanced contrast for form controls in dark mode */
    :is(.dig-content-flow, .dig-admin-context)
      :is(input, textarea, select).dig-form-control {
      background-color: hsl(
        var(--dig-hue-bg-alt),
        var(--dig-saturation-bg-alt),
        calc(var(--dig-lightness-bg-alt) * 100%)
      );
      border-color: var(--dig-color-border);
    }

    /* Better image rendering in dark mode */
    img {
      filter: brightness(0.9) contrast(1.1);
    }

    /* Improved disabled state visibility */
    .dig-btn:disabled,
    .dig-btn[aria-disabled="true"] {
      background-color: hsl(
        var(--dig-hue-border),
        var(--dig-saturation-border),
        calc((var(--dig-lightness-border) + 0.1) * 100%)
      );
      color: hsl(
        var(--dig-hue-text),
        var(--dig-saturation-text),
        calc((var(--dig-lightness-text) - 0.3) * 100%)
      );
    }

    /* Enhanced ghost button hover in dark mode */
    .dig-btn-ghost:hover {
      background-color: hsl(0, 0%, 20%);
    }
  }

  /*
 * ========================================================================
 * SAFE GLOBAL RESETS
 * ========================================================================
 * These rules are safe to apply globally because they target root elements
 * or use universal selectors that establish a baseline without destroying layouts.
 */

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margin ONLY from the body. This is a common and generally safe reset. */
  body {
    margin: 0;
  }

  /*
 * ========================================================================
 * SCOPED RESETS FOR FRAMEWORK COMPONENTS
 * ========================================================================
 * These rules are DANGEROUS if applied globally. We scope them so they ONLY
 * apply to elements inside our controlled containers (.dig-content-flow for frontend,
 * .dig-admin-context for our custom admin pages). This prevents any conflict
 * with the native WordPress Admin UI.
 */
  :is(.dig-content-flow, .dig-admin-context)
    :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  /* Set core root defaults */
  html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    scroll-behavior: smooth;
    scroll-padding-top: var(--dig-header-height);
  }

  /* Set SAFE core body defaults */
  body {
    min-height: 100dvh;
    background-color: var(--dig-color-bg); /* Background color is safe */
    margin: 0; /* The margin reset is here */
  }

  /* Apply typographic styles ONLY within framework-controlled containers */
  :is(.dig-content-flow, .dig-admin-context) {
    font-family: var(--dig-font-secondary);
    font-size: var(--dig-font-size-base);
    color: var(--dig-color-text);
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Remove list styles on ul, ol elements */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Make images easier to work with */
  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  :is(
      .dig-btn,
      .dig-form-control,
      .dig-form-check-input,
      .dig-form-switch input,
      [class*="dirpros-input"]
    ) {
    font: inherit;
  }

  /* Remove all animations, transitions and smooth scroll for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .dig-skeleton {
      animation: none;
    }
  }

  /* Focus styles */
  :focus-visible {
    outline: 2px dashed var(--dig-color-accent);
    outline-offset: 4px;
  }

  /* Remove focus styles for mouse users */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
  }

  ::-webkit-scrollbar-track {
    background: var(--dig-color-bg-alt);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--dig-color-primary);
    border-radius: var(--dig-radius-full);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--dig-color-primary-light);
  }

  /* For Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--dig-color-primary) var(--dig-color-bg-alt);
  }

  /* Scoped Typography: Headings will only use framework styles inside designated containers. */
  :is(.dig-content-flow, .dig-admin-context) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--dig-font-primary);
    font-weight: 700;
    color: var(--dig-color-primary);
    line-height: 1.2;
    margin-bottom: var(--dig-spacing-sm);
    text-wrap: balance;
  }
  :is(.dig-content-flow, .dig-admin-context) h1 {
    font-size: var(--dig-font-size-h1);
  }
  :is(.dig-content-flow, .dig-admin-context) h2 {
    font-size: var(--dig-font-size-h2);
  }
  :is(.dig-content-flow, .dig-admin-context) h3 {
    font-size: var(--dig-font-size-h3);
  }
  :is(.dig-content-flow, .dig-admin-context) h4 {
    font-size: var(--dig-font-size-h4);
  }
  :is(.dig-content-flow, .dig-admin-context) h5 {
    font-size: var(--dig-font-size-h5);
  }
  :is(.dig-content-flow, .dig-admin-context) h6 {
    font-size: var(--dig-font-size-h6);
    color: var(--dig-color-text-muted);
  }

  /* Scoped Paragraphs */
  :is(.dig-content-flow, .dig-admin-context) p {
    margin-bottom: var(--dig-spacing-xxs);
    max-width: var(--dig-text-max-width);
    text-wrap: pretty;
  }

  /* Links */
  /*
 * ========================================================================
 * The New, SAFE Global Link Reset
 * ========================================================================
 * We REMOVE `color: inherit;` from the global scope. The only safe global
 * resets are for text-decoration and transitions. Color will now be handled
 * explicitly only within our controlled contexts.
 */
  a {
    text-decoration: none; /* This is safe and desirable */
    transition: color var(--dig-transition-fast),
      text-decoration-color var(--dig-transition-fast); /* This is safe */
  }

  /*
 * ========================================================================
 * Scoped Link Styling for Framework Content
 * ========================================================================
 * Now, we apply our desired link colors ONLY inside our framework's containers.
 * We also explicitly exclude any element styled as a button (both our framework's
 * .dig-btn and WordPress's .button) to prevent any possible conflict.
 */
  :is(.dig-content-flow, .dig-admin-context) a:not(.dig-btn):not(.button) {
    color: var(--dig-color-primary); /* Our default framework link color */
  }

  :is(.dig-content-flow, .dig-admin-context) a:not(.dig-btn):not(.button):hover,
  :is(.dig-content-flow, .dig-admin-context)
    a:not(.dig-btn):not(.button):focus {
    color: var(--dig-color-accent);
    text-decoration: underline;
  }

  /* Opt-in Framework Link Styles */
  /* Apply your custom link styles ONLY inside your designated containers. */
  .dig-content-flow a:not(.dig-btn),
  .dig-admin-context a:not(.dig-btn) {
    color: var(--dig-color-primary);
    text-decoration: none;
  }

  .dig-content-flow a:not(.dig-btn):hover,
  .dig-content-flow a:not(.dig-btn):focus,
  .dig-admin-context a:not(.dig-btn):hover,
  .dig-admin-context a:not(.dig-btn):focus {
    color: var(--dig-color-accent);
    text-decoration: underline;
  }

  /* Lists */
  /**
 * Modern List Reset
 * Instead of applying padding globally, we remove default padding and margin.
 * Specific components should define their own list styles. This prevents
 * unintended side effects in third-party UIs like the WordPress admin.
 */
  ul,
  ol {
    /* Remove browser-default indentation and margin */
    padding: 0;
    margin: 0;
    /* The list-style is kept, to be overridden by components as needed */
  }

  /* We can keep a default bottom margin for lists that are direct children
   of a typical content flow, but NOT for all lists everywhere. */
  .dig-content-flow > ul,
  .dig-content-flow > ol {
    margin-bottom: var(--dig-spacing-sm);
    padding-left: var(--dig-spacing-md); /* Apply indentation only here */
  }

  .dig-content-area li {
    margin-bottom: var(--dig-spacing-xs);
  }

  /* Blockquotes */
  blockquote {
    border-left: 4px solid var(--dig-color-accent);
    padding-left: var(--dig-spacing-sm);
    color: var(--dig-color-primary);
    font-style: italic;
    margin: var(--dig-spacing-md) 0;
  }

  /* Code */
  code {
    font-family: var(--dig-font-mono);
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    border-radius: var(--dig-radius-sm);
    font-size: var(--dig-font-size-small);
  }

  pre {
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-sm);
    border-radius: var(--dig-radius-md);
    overflow-x: auto;
    margin-bottom: var(--dig-spacing-md);
  }

  pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  /* Horizontal Rule */
  hr {
    /* We only reset the border and height globally. */
    border: 0;
    height: 1px;
    background-color: var(--dig-color-border);
    margin: 0; /* The global reset now removes all margins. */
  }

  /* SCOPED MARGINS: Apply our custom spacing ONLY inside our containers. */
  :is(.dig-content-flow, .dig-admin-context) hr {
    margin: var(--dig-spacing-md) 0;
  }

  /* Text-level semantics */
  strong {
    font-weight: 700;
  }

  em {
    font-style: italic;
  }

  small {
    font-size: var(--dig-font-size-small);
  }

  mark {
    background-color: var(--dig-color-secondary);
    color: var(--dig-color-primary);
    padding: 0 0.2em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    text-decoration-style: dotted;
    cursor: help;
  }

  @media print {
    @layer print {
      *,
      *::before,
      *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
      }

      body {
        font-size: 12pt;
        line-height: 1.5;
      }

      a,
      a:visited {
        text-decoration: underline;
      }

      a[href^="#"]::after,
      a[href^="javascript:"]::after {
        content: "";
      }

      pre,
      blockquote {
        page-break-inside: avoid;
      }

      tr,
      img {
        page-break-inside: avoid;
      }

      img {
        max-width: 100% !important;
      }

      p,
      h2,
      h3 {
        orphans: 3;
        widows: 3;
      }

      h2,
      h3 {
        page-break-after: avoid;
      }

      .no-print {
        display: none !important;
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    :focus-visible {
      outline-color: var(--dig-color-accent-light);
    }
  }

  /* ==========================================================================
   Component: BlurHash Image Placeholder (Anti-Layout-Shift Version)
   ========================================================================== */
  .dig-image-blurhash-wrapper {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9; /* O var(--image-aspect-ratio, 16 / 9) */
    background-color: var(--dig-color-bg-alt);
  }

  .dig-blurhash-canvas,
  .dig-blurhash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-blurhash-canvas {
    z-index: 1;
    transition: opacity 0.5s ease;
  }

  .dig-blurhash-image {
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .dig-blurhash-image.is-loaded {
    opacity: 1;
  }

  .dig-content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
  }
}

/* ==========================================================================
   3. Layer 'components'
   ========================================================================== */
@layer components {
  .dig-skeleton {
    background-color: var(--dig-color-bg-alt);
    background-image: linear-gradient(
      90deg,
      var(--dig-color-bg-alt) 25%,
      var(--dig-color-bg) 50%,
      var(--dig-color-bg-alt) 75%
    );
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite linear;
    border-radius: var(--dig-radius-sm);
    color: transparent; /* Hides text inside a skeleton element */
  }

  /*
   * 1. The Row Container (`.dig-form-row`)
   * This is the flex container. The magic is in the negative margins.
   */
  .dig-form-row {
    display: flex;
    flex-wrap: wrap;

    /* Define the horizontal gap as a variable for easy tuning. */
    --dig-grid-gap-x: var(--dig-spacing-md, 1.5rem);

    /* The negative margin on each side is HALF of the total desired gap. */
    /* This pulls the child columns outwards, aligning them perfectly with the page grid. */
    margin-right: calc(var(--dig-grid-gap-x) / -2);
    margin-left: calc(var(--dig-grid-gap-x) / -2);
  }

  /* Add a consistent vertical gap between rows. */
  .dig-form-row + .dig-form-row {
    margin-top: var(--dig-spacing-md, 1.5rem);
  }

  /*
   * 2. The Column Items (`.dig-form-group`)
   * These are the flex items. The padding creates the gutter.
   */
  .dig-form-row > .dig-form-group {
    box-sizing: border-box; /* Crucial for correct padding calculation. */

    /* The horizontal "gutter" is created by adding padding on each side of the column. */
    /* The padding value is HALF of the total desired gap. */
    padding-right: calc(var(--dig-grid-gap-x) / 2);
    padding-left: calc(var(--dig-grid-gap-x) / 2);

    /* A consistent bottom margin for vertical rhythm within rows. */
    margin-bottom: var(--dig-spacing-md, 1.5rem);
  }

  /*
   * 3. Column Width Definitions (`.dig-col-*`)
   * We use `flex-basis` for the ideal width. The `max-width` prevents
   * shrinking/growing issues. `flex-grow: 0` is also important.
   */
  [class*="dig-col-"] {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .dig-col-100 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .dig-col-75 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .dig-col-66 {
    flex-basis: 66.6667%;
    max-width: 66.6667%;
  }
  .dig-col-50 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .dig-col-33 {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
  .dig-col-25 {
    flex-basis: 25%;
    max-width: 25%;
  }

  /*
   * 4. Responsive Stacking for Mobile
   */
  @media (max-width: var(--dig-breakpoint-md)) {
    html {
      scroll-padding-top: calc(var(--dig-header-height) / 2);
    }
    /* On smaller screens, the row no longer needs negative margins. */
    .dig-form-row {
      margin-right: 0;
      margin-left: 0;
    }

    /* Each column now takes up the full width and has its padding reset. */
    /* We use a direct child selector for precision. */
    .dig-form-row > .dig-form-group {
      flex-basis: 100% !important; /* Force full width */
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: var(--dig-spacing-md);
    }

    .dig-form-row > .dig-form-group:last-child {
      margin-bottom: 0;
    }
  }

  @container (max-width: 400px) {
    .dig-form-row > .dig-form-group {
      flex-basis: 100% !important;
      max-width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  }

  /* Container */
  .dig-container {
    width: 100%;
    max-width: var(--dig-container-max-width);
    margin: 0 auto;
    padding: 0 var(--dig-spacing-md);
  }

  /* Layout Patterns */
  .dig-layout-z {
    display: grid;
    grid-template-areas:
      "header header"
      "left right"
      "footer footer";
    grid-template-columns: 1fr 1fr;
    gap: var(--dig-spacing-md);
  }

  .dig-layout-z > header {
    grid-area: header;
  }
  .dig-layout-z > .left {
    grid-area: left;
  }
  .dig-layout-z > .right {
    grid-area: right;
  }
  .dig-layout-z > footer {
    grid-area: footer;
  }

  .dig-layout-f {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dig-spacing-md);
  }

  /* Grid System */
  .dig-grid {
    display: grid;
    gap: var(--dig-spacing-md);
  }

  .dig-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dig-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Subgrid Support */
  @supports (grid-template-columns: subgrid) {
    .subgrid {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: span 2;
    }
  }

  /* Flex Utilities */
  .dig-flex {
    display: flex;
    gap: var(--dig-spacing-sm);
  }

  .dig-flex-col {
    flex-direction: column;
  }

  .dig-flex-wrap {
    flex-wrap: wrap;
  }

  .dig-items-center {
    align-items: center;
  }

  .dig-justify-between {
    justify-content: space-between;
  }

  /* Spacing Utilities */
  .dig-gap-xs {
    gap: var(--dig-spacing-xs);
  }
  .dig-gap-sm {
    gap: var(--dig-spacing-sm);
  }
  .dig-gap-md {
    gap: var(--dig-spacing-md);
  }
  .dig-gap-lg {
    gap: var(--dig-spacing-lg);
  }
  .dig-gap-xl {
    gap: var(--dig-spacing-xl);
  }

  .dig-p-xs {
    padding: var(--dig-spacing-xs);
  }
  .dig-p-sm {
    padding: var(--dig-spacing-sm);
  }
  .dig-p-md {
    padding: var(--dig-spacing-md);
  }
  .dig-p-lg {
    padding: var(--dig-spacing-lg);
  }
  .dig-p-xl {
    padding: var(--dig-spacing-xl);
  }

  .dig-m-xs {
    margin: var(--dig-spacing-xs);
  }
  .dig-m-sm {
    margin: var(--dig-spacing-sm);
  }
  .dig-m-md {
    margin: var(--dig-spacing-md);
  }
  .dig-m-lg {
    margin: var(--dig-spacing-lg);
  }
  .dig-m-xl {
    margin: var(--dig-spacing-xl);
  }

  /* Full viewport sections */
  .dig-full-viewport {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  /* Scroll Snap */
  .dig-scroll-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100dvh;
  }

  .dig-scroll-section {
    scroll-snap-align: start;
    min-height: 100dvh;
  }

  /* Container Queries */
  .dig-card-container {
    container-type: inline-size;
  }

  @container (min-width: 480px) {
    .dig-card {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Anchor Positioning */
  .dig-tooltip {
    position: absolute;
    anchor-name: --tooltip-anchor;
  }

  .dig-tooltip-content {
    position: absolute;
    bottom: anchor(--tooltip-anchor top);
    left: anchor(--tooltip-anchor left);
  }

  /*
 * ========================================================================
 * Layout Component: Admin UI Sidebar Layout
 * ========================================================================
 * Provides a two-column layout for application-like interfaces in the admin.
 */
  .dig-layout-sidebar {
    display: grid;
    /* Sidebar width is fixed, main content is flexible */
    grid-template-columns: var(--dig-sidebar-width) 1fr;
    gap: var(--dig-spacing-md);
    /* Make the layout fill the available vertical space */
    height: calc(
      100vh - 180px
    ); /* Adjust 180px based on WP admin header/footer height */
    overflow: hidden; /* Prevent double scrollbars on the main wrapper */
  }

  .dig-layout-sidebar__sidebar {
    background-color: var(--dig-color-bg-alt);
    border-right: 1px solid var(--dig-color-border);
    padding: var(--dig-spacing-md);
    overflow-y: auto; /* Enable scrolling ONLY for the sidebar content */
  }

  .dig-layout-sidebar__main {
    padding: var(--dig-spacing-md);
    overflow-y: auto; /* Enable scrolling for the main content (iframe) */
  }

  .dig-layout-sidebar__main iframe {
    width: 100%;
    height: 100%;
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    background-color: var(--dig-color-bg); /* For loading state */
  }

  /* Responsive behavior for the admin layout */
  @media (max-width: var(--dig-breakpoint-lg)) {
    .dig-layout-sidebar {
      grid-template-columns: 1fr; /* Stack columns on smaller screens */
      height: auto;
      overflow: visible;
    }
    .dig-layout-sidebar__sidebar {
      border-right: none;
      border-bottom: 1px solid var(--dig-color-border);
    }
  }

  /* ========================================================================
 * Component: Buttons (v5.0 - Perfect Score Edition)
 * ========================================================================
 * Fully accessible, performant, and consistent button system with 
 * complete auto-contrast support and reduced-motion compliance.
 * ========================================================================
 */

  .dig-btn {
    /* --- 1. BASE STRUCTURAL & TYPOGRAPHIC STYLES --- */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--dig-radius-full);
    cursor: pointer;

    /* --- 2. OPTIMIZED TRANSITIONS & PERFORMANCE --- */
    transition: background-color var(--dig-transition-fast),
      border-color var(--dig-transition-fast), color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast),
      transform var(--dig-transition-fast);

    /* --- 3. DEFAULT STATE & AUTO-CONTRAST LOGIC --- */
    --bg-lightness: var(--dig-lightness-primary);
    --current-hue: var(--dig-hue-primary);
    --current-saturation: var(--dig-saturation-primary);
    background-color: var(--dig-color-primary);

    /* Unified auto-contrast system */
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      calc(var(--auto-contrast-lightness) * 100%)
    );
  }

  /* --- 4. INTERACTION & ACCESSIBILITY STATES --- */

  .dig-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--dig-shadow-md);
    /* Simplified and mathematically correct hover calculation */
    background-color: hsl(
      var(--current-hue),
      var(--current-saturation),
      calc((var(--bg-lightness) + (0.1 - (var(--is-light) * 0.2))) * 100%)
    );

    /* Performance optimization only when needed */
    will-change: transform, box-shadow;
  }

  .dig-btn:focus-visible {
    outline: 2px solid var(--dig-color-accent);
    outline-offset: 2px;
  }

  .dig-btn:active {
    transform: translateY(0);
    box-shadow: var(--dig-shadow-sm);
  }

  .dig-btn:disabled,
  .dig-btn[aria-disabled="true"] {
    background-color: var(--dig-color-border);
    --bg-lightness: var(--dig-lightness-border);
    color: var(--dig-color-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.7;
  }

  /* --- 5. REDUCED MOTION SUPPORT (Full Compliance) --- */
  @media (prefers-reduced-motion: reduce) {
    .dig-btn {
      transition: background-color var(--dig-transition-fast),
        border-color var(--dig-transition-fast),
        color var(--dig-transition-fast), box-shadow var(--dig-transition-fast);
    }

    .dig-btn:hover {
      transform: none;
      will-change: auto;
    }

    .dig-btn:active {
      transform: none;
    }
  }

  /* --- 6. BUTTON VARIANTS (Pure Context Setters) --- */

  .dig-btn-primary {
    --bg-lightness: var(--dig-lightness-primary);
    --current-hue: var(--dig-hue-primary);
    --current-saturation: var(--dig-saturation-primary);
    background-color: var(--dig-color-primary);
  }

  .dig-btn-secondary {
    --bg-lightness: var(--dig-lightness-secondary);
    --current-hue: var(--dig-hue-secondary);
    --current-saturation: var(--dig-saturation-secondary);
    background-color: var(--dig-color-secondary);
  }

  .dig-btn.dig-btn-secondary {
    --auto-contrast-lightness: var(--dig-lightness-text);
  }

  .dig-btn.dig-btn-secondary:hover,
  .dig-btn.dig-btn-secondary:focus {
    --auto-contrast-lightness: var(--dig-lightness-text);
    background-color: hsl(
      var(--current-hue),
      var(--current-saturation),
      calc((var(--bg-lightness) - 0.1) * 100%)
    );
  }

  .dig-btn.dig-btn-secondary:disabled,
  .dig-btn.dig-btn-secondary[aria-disabled="true"] {
    --auto-contrast-lightness: calc(var(--dig-lightness-text) + 0.3);
  }

  .dig-btn-accent {
    --bg-lightness: var(--dig-lightness-accent);
    --current-hue: var(--dig-hue-accent);
    --current-saturation: var(--dig-saturation-accent);
    background-color: var(--dig-color-accent);
  }

  /* --- 7. OUTLINE BUTTON (Completely Consistent) --- */
  .dig-btn-outline {
    --bg-lightness: 1; /* Light context for transparent background */
    background-color: transparent;
    border-color: var(--dig-color-primary);
    /* Manual color for brand consistency in both states */
    color: var(--dig-color-primary);
  }

  .dig-btn-outline:hover {
    --bg-lightness: var(--dig-lightness-primary); /* Dark context for hover */
    background-color: var(--dig-color-primary);
    border-color: var(--dig-color-primary);
    /* Consistent manual color - overrides auto-contrast for brand consistency */
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      calc(var(--auto-contrast-lightness) * 100%)
    );
  }

  .dig-btn-outline:disabled,
  .dig-btn-outline[aria-disabled="true"] {
    background-color: transparent;
    border-color: var(--dig-color-border);
    color: var(--dig-color-border);
  }

  /* --- 8. GHOST BUTTON VARIANT (Bonus Accessibility) --- */
  .dig-btn-ghost {
    --bg-lightness: 1;
    background-color: transparent;
    border-color: transparent;
    color: var(--dig-color-primary);
  }

  .dig-btn-ghost:hover {
    --bg-lightness: 0.95; /* Very light gray */
    background-color: hsl(0, 0%, 95%);
    border-color: transparent;
  }

  @media (prefers-color-scheme: dark) {
    .dig-btn-ghost:hover {
      --bg-lightness: 0.15; /* Very dark gray */
      background-color: hsl(0, 0%, 15%);
    }
  }

  /* --- 9. BUTTON SIZES (Complete Set) --- */
  .dig-btn-xs {
    padding: var(--dig-spacing-xxs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-small);
  }

  .dig-btn-sm {
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-small);
  }

  .dig-btn-lg {
    padding: var(--dig-spacing-md) var(--dig-spacing-lg);
    font-size: var(--dig-font-size-h5);
  }

  .dig-btn-xl {
    padding: var(--dig-spacing-lg) var(--dig-spacing-xl);
    font-size: var(--dig-font-size-h4);
  }

  /* --- 10. BUTTON WITH ICONS (Bonus Utility) --- */
  .dig-btn--with-icon {
    gap: var(--dig-spacing-xs);
  }

  .dig-btn__icon {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
  }

  .dig-btn__icon--start {
    order: -1;
  }

  .dig-btn__icon--end {
    order: 1;
  }

  /* --- 11. HIGH CONTRAST MODE SUPPORT --- */
  @media (prefers-contrast: high) {
    .dig-btn {
      border-width: 2px;
    }

    .dig-btn:focus-visible {
      outline-width: 3px;
      outline-offset: 1px;
    }

    .dig-btn-outline {
      border-width: 2px;
    }
  }

  /* --- 12. PRINT STYLES --- */
  @media print {
    .dig-btn {
      background-color: #000 !important;
      color: #fff !important;
      border: 1px solid #000 !important;
      box-shadow: none !important;
      transform: none !important;
    }

    .dig-btn-outline {
      background-color: transparent !important;
      color: #000 !important;
      border: 1px solid #000 !important;
    }
  }

  /* Cards */
  .dig-card {
    background: var(--dig-color-bg);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-sm);
    overflow: hidden;
    transition: transform var(--dig-transition-base),
      box-shadow var(--dig-transition-base);
  }

  .dig-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--dig-shadow-md);
  }

  .dig-card-header {
    padding: var(--dig-spacing-md);
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-card-body {
    padding: var(--dig-spacing-md);
  }

  .dig-card-footer {
    padding: var(--dig-spacing-md);
    border-top: 1px solid var(--dig-color-border);
  }

  /*
   * ========================================================================
   * Component: Integration Marketplace Cards
   * ========================================================================
   */
  .dig-integration-card {
    /* Smooth transition for hover effects */
    transition: transform 0.2s ease, box-shadow 0.2s ease,
      border-color 0.2s ease;
    cursor: pointer;
    display: flex; /* Ensure it behaves as a flex container if needed */
    flex-direction: column;
    height: 100%; /* Make cards equal height in grid */
  }

  .dig-integration-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
      0 8px 10px -6px rgba(0, 0, 0, 0.1);
    /* Use primary color or accent color for border on hover */
    border-color: var(--dig-color-primary);
  }

  /* Active State (Green Border & Subtle Background) */
  .dig-integration-card--active {
    border-color: var(--dig-color-success);
    background: linear-gradient(
      to bottom,
      var(--dig-color-bg),
      var(--dig-color-success-bg)
    );
  }

  /* Ensure the badge inside the active card looks correct */
  .dig-integration-card--active .dig-badge-success {
    background-color: var(--dig-color-success-bg);
    color: var(--dig-color-success-text);
    border: 1px solid var(--dig-color-success-border);
  }

  /* Forms */
  .dig-form-group {
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-form-label {
    display: block;
    margin-bottom: var(--dig-spacing-xs);
    font-weight: 600;
  }

  /*
   * ========================================================================
   * Form Field UI Helpers (Required Indicators, Instructions, Errors)
   * ========================================================================
   */

  /*
   * Styles for the red asterisk (*) on required fields.
   */
  .dig-required-indicator {
    color: var(--dig-color-danger);
    font-weight: bold;
    margin-left: var(--dig-spacing-xxs);
  }

  /*
   * Styles for the wrapper of the actual input/select/textarea.
   */
  .dig-form-control-wrapper {
    position: relative; /* Useful for positioning icons inside inputs */
  }

  /*
   * Styles for instructional/help text below a field.
   */
  .dig-form-instructions {
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
    margin-top: var(--dig-spacing-xs);
  }

  /*
   * Styles for the container of validation error messages.
   */
  .dig-field-errors {
    margin-top: var(--dig-spacing-xs);
  }

  .dig-error-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-error-item {
    color: var(--dig-color-danger);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
  }

  /*
 * ========================================================================
 * Component: Password Field with Visibility Toggle
 * ========================================================================
 * Styles for positioning the visibility toggle button inside the password
 * input field for a modern, clean user experience.
 */

  /*
 * 1. The Wrapper: `.dig-password-input-wrapper`
 * This is the container for both the input and the button. By setting
 * `position: relative`, it becomes the positioning context for the
 * absolutely positioned button inside it.
 */
  .dig-password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  /*
 * 2. The Input Field
 * We add padding to the right side of the input field. This creates a
 * dedicated space for the toggle button, preventing the user's typed
 * text from overlapping with the button icon.
 */
  .dig-password-input-wrapper .dig-form-control {
    /* The padding needs to be wide enough for the button plus some breathing room.
       A value around 2.5em or 40px is usually a good starting point. */
    padding-right: 2.5em;
    width: 100%; /* Ensure the input still fills its container. */
  }

  /*
 * 3. The Toggle Button
 * This is the core of the technique. We use `position: absolute` to pull the
 * button out of the normal document flow and place it precisely where we want
 * it, visually "inside" the input field.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn {
    position: absolute;
    right: var(
      --dig-spacing-sm
    ); /* Position from the right edge. Uses your spacing variable. */
    top: 50%;
    transform: translateY(
      -50%
    ); /* This vertically centers the button perfectly. */

    /* Reset button styles for a clean, icon-only look */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--dig-color-text-muted); /* A subtle color for the icon. */
    height: 100%; /* Make the clickable area vertically fill the input. */
    display: inline-flex;
    align-items: center;

    /* Ensure it appears above the input field's content/border */
    z-index: 2;

    /* Smooth transition for color changes on hover/focus */
    transition: color var(--dig-transition-fast) ease-in-out;
  }

  /*
 * 4. Interaction States (Hover/Focus)
 * Provide clear visual feedback when the user interacts with the button.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn:hover,
  .dig-password-input-wrapper .dig-password-toggle-btn:focus-visible {
    color: var(--dig-color-primary); /* Use your primary color for emphasis. */
  }

  /* Remove default focus outline if you have a custom one via color change */
  .dig-password-input-wrapper .dig-password-toggle-btn:focus {
    outline: none;
  }

  /*
 * 5. The Dashicon inside the button
 * Adjust the icon size for optimal appearance.
 */
  .dig-password-input-wrapper .dig-password-toggle-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    vertical-align: middle; /* Helps with pixel-perfect alignment. */
  }

  /* ==========================================================================
   Component: Image Selector
   ========================================================================== */
  .dig-image-selector-ui {
    display: flex;
    align-items: flex-start; /* Alinea los items arriba */
    gap: var(--dig-spacing-md);
  }

  .dig-image-preview-area {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--dig-color-bg-alt);
  }

  .dig-image-preview-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-image-placeholder {
    text-align: center;
    color: var(--dig-color-text-muted);
    font-size: var(--dig-font-size-small);
  }

  .dig-image-actions {
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
  }

  .dig-btn-text-danger {
    background: none;
    border: none;
    padding: 0;
    color: var(--dig-color-danger);
    text-decoration: underline;
    cursor: pointer;
    font-size: var(--dig-font-size-small);
  }
  .dig-btn-text-danger:hover {
    text-decoration: none;
  }

  /*
   * 1. The Real Input: `.dig-file-input-real`
   * We use the "visually-hidden" technique. This hides the element from view
   * but keeps it in the DOM, focusable, and fully functional for assistive
   * technologies and form submissions. It's the most accessible way to
   * create a custom file input.
  */
  .dig-file-input-real {
    /* Visually-Hidden Technique */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /*
   * 2. The Custom Button (The Label)
   * When a user focuses the visually-hidden input via keyboard (e.g., Tabbing),
   * we want to show a focus state on the VISIBLE label to provide feedback.
   * The `+` selector targets the label that immediately follows the input.
  */
  .dig-file-input-real:focus-visible + .dig-btn {
    outline: 2px dashed var(--dig-color-accent);
    outline-offset: 2px;
  }

  /*
   * 3. The Control UI Wrapper
   * This helps align the custom button and the filename display.
  */
  .dig-file-control-ui {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-sm);
  }

  /*
   * 4. The Filename Display Area
   * Styles for the area that shows the name of the selected file.
  */
  .dig-file-display-area {
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
  }

  .dig-current-file {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-sm);
    background-color: var(--dig-color-bg-alt);
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border-radius: var(--dig-radius-md);
  }

  .dig-remove-file-btn {
    background: none;
    border: none;
    color: var(--dig-color-danger);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 0.25em;
  }

  /*
   * 1. The Main Footer Wrapper (`<footer class="dig-footer">`)
  */
  .dig-footer {
    padding-top: var(--dig-spacing-lg);
    padding-bottom: var(--dig-spacing-lg);
    background-color: var(--dig-color-bg-alt);
    border-top: 1px solid var(--dig-color-border);
    color: var(--dig-color-text-muted);
  }

  /*
   * 2. The Inner Container (`.dig-footer__inner`)
  */
  .dig-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dig-spacing-md);
  }

  /*
   * 5. The Social Links List (`.dig-social-links`)
  */
  .dig-social-links,
  .dig-social-links li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .dig-social-links {
    display: flex;
    justify-content: center;
    gap: var(--dig-spacing-md);
  }

  /*
   * 6. Individual Social Link Items (`.dig-social-links__item`)
  */
  .dig-social-links__item a {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--dig-color-text-muted);
    text-decoration: none;
    transition: color var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

  .dig-social-links__item a:hover,
  .dig-social-links__item a:focus-visible {
    color: var(--dig-color-primary);
    transform: translateY(-2px) scale(1.1);
  }

  /*
   * 7. The Dashicon Span
  */
  .dig-social-links__item .dashicons {
    width: 1em;
    height: 1em;
    font-size: inherit;
  }

  /*
   * 8. The Meta/Copyright Text (`.dig-footer__meta`)
  */
  .dig-footer__meta p {
    margin: 0;
    font-size: var(--dig-font-size-small);
  }

  /**
	 * ========================================================================
	 * Form Controls (Inputs, Textareas, Selects) - v7 MODERN & CONSOLIDATED
	 * ========================================================================
	 */
  :is(
      input:not(
          [type="range"],
          [type="color"],
          [type="checkbox"],
          [type="radio"],
          [type="submit"],
          [type="button"],
          [type="reset"],
          [type="file"]
        ),
      textarea,
      select
    ).dig-form-control {
    width: 100%;
    margin: var(--dig-form-control-margin, 0);
    padding: var(--dig-form-control-padding, var(--dig-spacing-sm));
    font-size: var(--dig-font-size-base);
    color: var(--dig-form-control-color, var(--dig-color-text));
    background-color: var(--dig-form-control-bg, var(--dig-color-bg));
    border: var(--dig-form-control-border, 1px solid var(--dig-color-border));
    border-radius: var(--dig-form-control-radius, var(--dig-radius-md));
    box-shadow: var(--dig-form-control-shadow, none);
    line-height: var(--dig-form-control-line-height, 1.5);
    min-height: var(--dig-form-control-min-height, auto);
    transition: border-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }

  :is(
      input:not(
          [type="range"],
          [type="color"],
          [type="checkbox"],
          [type="radio"],
          [type="submit"],
          [type="button"],
          [type="reset"],
          [type="file"]
        ),
      textarea,
      select
    ).dig-form-control:focus {
    border-color: var(
      --dig-form-control-focus-border-color,
      var(--dig-color-primary)
    );
    box-shadow: var(
      --dig-form-control-focus-shadow,
      0 0 0 1px var(--dig-color-primary)
    );
    outline: none;
  }

  /*
	   * Placeholder State
	   */
  input.dig-form-control::placeholder,
  textarea.dig-form-control::placeholder {
    color: var(--dig-color-text-muted);
    opacity: 1;
  }

  /*
	   * Disabled State
	   */
  input.dig-form-control:disabled,
  textarea.dig-form-control:disabled,
  select.dig-form-control:disabled {
    background-color: var(--dig-color-bg-alt);
    opacity: 0.7;
    cursor: not-allowed;
    border-color: var(--dig-color-border-light);
  }

  /* ========================================================================
  Form Validation States & Helpers
======================================================================== */
  .digentus-one-field--has-errors .dig-form-control {
    border-color: var(--dig-color-danger);
  }

  .digentus-one-field--has-errors .dig-form-control:focus {
    /* Maintain the error state indication even when focused */
    border-color: var(--dig-color-danger);
    box-shadow: 0 0 0 1px var(--dig-color-danger);
  }

  /*
 * Styles for the error message container itself.
 * This is where the JS will inject the error text.
 */
  .digentus-one-field-error-message {
    margin-top: var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-danger);
  }

  .digentus-one-field-error-message ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-xxs);
  }

  .dig-form-text {
    display: block;
    margin-top: var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    color: var(--dig-color-text-muted);
  }

  /* Checkboxes & Radios */
  .dig-form-check {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-xs);
    margin-bottom: var(--dig-spacing-xs);
  }

  .dig-form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0;
    vertical-align: middle;
  }

  .dig-form-check-label {
    margin-bottom: 0;
  }

  /* Toggle Switches */
  .dig-form-switch {
    position: relative;
    display: inline-block;
    width: 2.5em;
    height: 1.5em;
  }

  .dig-form-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .dig-form-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dig-color-border);
    transition: 0.4s;
    border-radius: var(--dig-radius-full);
  }

  .dig-form-switch-slider:before {
    position: absolute;
    content: "";
    height: 1em;
    width: 1em;
    left: 0.25em;
    bottom: 0.25em;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  input:checked + .dig-form-switch-slider {
    background-color: var(--dig-color-accent);
  }

  input:checked + .dig-form-switch-slider:before {
    transform: translateX(1em);
  }

  /*
   * Custom Select Styling
   */
  .dig-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--dig-spacing-sm) center;
    background-size: 1.2em;
    padding-right: calc(var(--dig-spacing-sm) * 2 + 1.2em);
  }

  /* Remove custom arrow for multiple-select listboxes */
  select[multiple].dig-select {
    background-image: none;
    padding-right: var(--dig-spacing-sm);
    height: auto;
  }

  /* Range */
  .dig-form-range {
    width: 100%;
    height: 0.5em;
    appearance: none;
    background: var(--dig-color-border);
    border-radius: var(--dig-radius-full);
    outline: none;
  }

  .dig-form-range::-webkit-slider-thumb {
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    background: var(--dig-color-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  .dig-form-range::-moz-range-thumb {
    width: 1.25em;
    height: 1.25em;
    background: var(--dig-color-primary);
    border-radius: 50%;
    cursor: pointer;
  }

  /*
   * ========================================================================
   * Component: Badges (Refactored with Auto-Contrast)
   * ========================================================================
   */
  .dig-badge {
    /* Base styles remain the same */
    display: inline-block;
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: var(--dig-radius-full);
  }

  .dig-badge-primary {
    --bg-lightness: var(--dig-lightness-primary);
    background-color: var(--dig-color-primary);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-badge-secondary {
    --bg-lightness: var(--dig-lightness-secondary);
    background-color: var(--dig-color-secondary);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-badge-accent {
    --bg-lightness: var(--dig-lightness-accent);
    background-color: var(--dig-color-accent);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  /* Navigation */
  .dig-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dig-spacing-md);
  }

  .dig-nav ul,
  [role="menubar"],
  [role="menu"] {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .dig-nav-link {
    color: var(--dig-color-text);
    text-decoration: none;
    transition: color var(--dig-transition-fast);
  }

  .dig-nav-link:hover {
    color: var(--dig-color-primary);
  }

  .dig-nav-link.active {
    color: var(--dig-color-accent);
    font-weight: 600;
  }

  /* Tabs */
  .dig-tab-container {
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-tab-list {
    display: flex;
    gap: var(--dig-spacing-md);
  }

  .dig-tab {
    padding: var(--dig-spacing-sm) 0;
    position: relative;
    cursor: pointer;
  }

  .dig-tab.active {
    color: var(--dig-color-accent);
  }

  .dig-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--dig-color-accent);
  }

  .dig-tab-panel {
    display: none;
    padding: var(--dig-spacing-md) 0;
  }

  .dig-tab-panel.active {
    display: block;
  }

  /* Modal */
  .dig-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--dig-z-index-modal);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dig-transition-base);
  }

  .dig-modal.active {
    opacity: 1;
    pointer-events: all;
  }

  .dig-modal .dig-modal-content {
    transform: translateY(0);
  }

  .dig-modal .dig-modal-content {
    background-color: var(--dig-color-bg);
    border-radius: var(--dig-radius-md);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--dig-shadow-xl);
    transform: translateY(-20px);
    transition: transform var(--dig-transition-base);
  }

  .dig-modal-header {
    padding: var(--dig-spacing-md);
    border-bottom: 1px solid var(--dig-color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dig-modal-body {
    padding: var(--dig-spacing-md);
  }

  .dig-modal-footer {
    padding: var(--dig-spacing-md);
    border-top: 1px solid var(--dig-color-border);
    display: flex;
    justify-content: flex-end;
    gap: var(--dig-spacing-sm);
  }

  /* Carousel */
  /*
   * 1. The main component wrapper.
   *    Establishes the positioning context for navigation elements.
   */
  [data-dig-component="carousel"] {
    position: relative;
    /* You can add aspect-ratio for responsive height control if needed */
    /* aspect-ratio: 16 / 9; */
  }

  /*
   * 2. The track wrapper.
   *    Its only job is to hide the overflowing slides.
   */
  .dig-carousel-track-wrapper {
    overflow: hidden;
    border-radius: var(--dig-radius-md); /* Inherit branding */
  }

  /*
   * 3. The track.
   *    This is the flex container that moves. Transitions are handled by JS
   *    to manage the "snap back" for the infinite loop.
   */
  .dig-carousel-track {
    display: flex;
    will-change: transform;
  }

  .dig-carousel-track.is-grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    user-select: none;
  }

  /*
   * 4. The individual slides.
   *    They are designed to take up 100% of the container's width.
   */
  .dig-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    /* Add padding here if you want space INSIDE each slide */
    /* padding: var(--dig-spacing-md); */
  }

  /*
   * 5. Navigation Buttons (Prev/Next Arrows).
   *    Styled to look clean and be positioned correctly.
   */
  .dig-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--dig-z-index-sticky); /* Use z-index variable */

    /* Reusing button styles is good, but for overlays, custom is better */
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--dig-color-text-light);
    border: none;
    border-radius: var(--dig-radius-full);
    width: 44px; /* Accessible touch target size */
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-carousel-btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dig-carousel-btn--prev {
    left: var(--dig-spacing-sm);
  }

  .dig-carousel-btn--next {
    right: var(--dig-spacing-sm);
  }

  /*
   * 6. Dot Navigation.
   *    Positioned at the bottom, centered.
   */
  .dig-carousel-dots {
    position: absolute;
    bottom: var(--dig-spacing-sm);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--dig-z-index-sticky);
    display: flex;
    gap: var(--dig-spacing-xs);
  }

  .dig-carousel-dots button {
    /* Reset button styles for a clean dot */
    padding: 0;
    border: 1px solid var(--dig-color-text-light);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-carousel-dots button.is-active {
    background-color: var(--dig-color-text-light);
  }

  .is-static .dig-carousel-btn,
  .is-static .dig-carousel-dots {
    display: none;
  }

  /*Icons*/
  .dig-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em; /* Better vertical alignment with text */
  }

  .dig-icon-button {
    /* Reset button styles for icon-only buttons */
    background: none;
    border: none;
    padding: var(--dig-spacing-xs);
    border-radius: var(--dig-radius-sm);
    cursor: pointer;
    line-height: 0;
    color: inherit;
  }
  .dig-icon-button:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  @media (prefers-color-scheme: dark) {
    .dig-icon-button:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  /* Tooltips */
  .dig-tooltip {
    position: relative;
    display: inline-block;
  }

  .dig-tooltip-content {
    position: absolute;
    background-color: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border-radius: var(--dig-radius-sm);
    font-size: var(--dig-font-size-small);
    white-space: nowrap;
    z-index: var(--dig-z-index-tooltip);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dig-transition-fast);
  }

  .dig-tooltip:hover .dig-tooltip-content {
    opacity: 1;
    visibility: visible;
  }

  .dig-tooltip-top .dig-tooltip-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--dig-spacing-xs);
  }

  .dig-tooltip-bottom .dig-tooltip-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--dig-spacing-xs);
  }

  .dig-tooltip-left .dig-tooltip-content {
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: var(--dig-spacing-xs);
  }

  .dig-tooltip-right .dig-tooltip-content {
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: var(--dig-spacing-xs);
  }

  /* Progress */
  .dig-progress {
    height: 0.5em;
    background-color: var(--dig-color-bg-alt);
    border-radius: var(--dig-radius-full);
    overflow: hidden;
  }

  .dig-progress-bar {
    height: 100%;
    background-color: var(--dig-color-primary);
    transition: width var(--dig-transition-slow);
  }

  /* Spinners */
  .dig-spinner {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border: 0.25em solid var(--dig-color-border);
    border-top-color: var(--dig-color-primary);
    border-radius: 50%;
    animation: spin var(--dig-animation-duration) linear infinite;
  }

  /* Avatars */
  .dig-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-color: var(--dig-color-bg-alt);
    color: var(--dig-color-text);
    font-weight: 600;
    overflow: hidden;
  }

  .dig-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dig-avatar-sm {
    width: 2em;
    height: 2em;
    font-size: var(--dig-font-size-small);
  }

  .dig-avatar-lg {
    width: 3.5em;
    height: 3.5em;
    font-size: var(--dig-font-size-h5);
  }

  /*
   * ========================================================================
   * Component: Toast Notifications (Refactored with Auto-Contrast)
   * ========================================================================
   */
  .dig-toast-container {
    position: fixed;
    bottom: var(--dig-spacing-md);
    right: var(--dig-spacing-md);
    z-index: var(--dig-z-index-toast);
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
    /* Ensure clicks pass through the container itself */
    pointer-events: none;
  }

  .dig-toast {
    /* Base styles */
    padding: var(--dig-spacing-sm) var(--dig-spacing-md);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-lg);
    min-width: 250px;
    max-width: 350px;
    /* Allow clicks on the toast messages */
    pointer-events: auto;

    /* Animation initial state */
    transform: translateX(calc(100% + var(--dig-spacing-md)));
    opacity: 0;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;

    /* Default to info style */
    --bg-lightness: var(--dig-lightness-info);
    background-color: var(--dig-color-info);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast.show {
    /* Animation final state */
    transform: translateX(0);
    opacity: 1;
  }

  .dig-toast-success {
    --bg-lightness: var(--dig-lightness-success);
    background-color: var(--dig-color-success);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast-error {
    --bg-lightness: var(--dig-lightness-danger);
    background-color: var(--dig-color-danger);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  .dig-toast-info {
    --bg-lightness: var(--dig-lightness-info);
    background-color: var(--dig-color-info);
    color: hsl(
      var(--dig-hue-text),
      var(--dig-saturation-text),
      var(--auto-contrast-lightness)
    );
  }

  /* Accordion */
  .dig-accordion-item {
    border-bottom: 1px solid var(--dig-color-border);
  }

  .dig-accordion-header {
    padding: var(--dig-spacing-sm) 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dig-accordion-content {
    padding: var(--dig-spacing-sm) 0;
    display: none;
  }

  .dig-accordion-item.active .dig-accordion-content {
    display: block;
  }

  /* Dropdown */
  .dig-dropdown {
    position: relative;
    display: inline-block;
  }

  .dig-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--dig-color-bg);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    box-shadow: var(--dig-shadow-md);
    min-width: 200px;
    z-index: var(--dig-z-index-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--dig-transition-fast),
      transform var(--dig-transition-fast);
  }

  .dig-dropdown.active .dig-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .dig-dropdown-item {
    display: block;
    padding: var(--dig-spacing-sm) var(--dig-spacing-md);
    color: var(--dig-color-text);
    text-decoration: none;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-dropdown-item:hover {
    background-color: var(--dig-color-bg-alt);
  }

  /* Breadcrumb */
  .dig-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dig-spacing-xs);
    list-style: none;
  }

  .dig-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--dig-spacing-xs);
  }

  .dig-breadcrumb-item:not(:last-child)::after {
    content: "/";
    color: var(--dig-color-text-muted);
  }

  /* Pagination */
  .dig-pagination {
    display: flex;
    gap: var(--dig-spacing-xs);
    list-style: none;
  }

  .dig-page-item {
    display: inline-flex;
  }

  .dig-page-link {
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-sm);
    text-decoration: none;
    transition: background-color var(--dig-transition-fast);
  }

  .dig-page-link:hover {
    background-color: var(--dig-color-bg-alt);
  }

  .dig-page-item.active .page-link {
    background-color: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    border-color: var(--dig-color-primary);
  }

  /* Table */
  .dig-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-table th,
  .dig-table td {
    padding: var(--dig-spacing-sm);
    border: 1px solid var(--dig-color-border);
    text-align: left;
  }

  .dig-table th {
    background-color: var(--dig-color-bg-alt);
    font-weight: 600;
  }

  .dig-table-striped tbody tr:nth-child(odd) {
    background-color: var(--dig-color-bg-alt);
  }

  .dig-table-hover tbody tr:hover {
    background-color: rgba(0, 8, 45, 0.05);
  }

  /* ==========================================================================
   Web Components & Shadow DOM Support
   ==========================================================================
*/
  :host {
    display: block;
    contain: content;
  }

  ::slotted(*) {
    margin-bottom: var(--dig-spacing-sm);
  }

  ::slotted(h1),
  ::slotted(h2),
  ::slotted(h3) {
    margin-top: var(--dig-spacing-md);
  }
}

/* ==========================================================================
   4. Layer 'themes'
   ========================================================================== */
@layer themes {
  /* Reduced data mode */
  @media (prefers-reduced-data: reduce) {
    * {
      background-image: none !important;
    }

    img,
    video {
      display: none !important;
    }
  }

  /* High Contrast Mode */
  @media (prefers-contrast: more) {
    :root {
      --dig-color-border: #000000;
    }
    body {
      background-image: none !important;
    }
    img {
      filter: contrast(1.5) !important;
    }
    :focus-visible {
      outline-width: 3px;
    }
    .dig--has-errors > .dig-form-control {
      outline: 2px solid var(--dig-color-danger);
      box-shadow: none;
    }
    .dig-form-control::placeholder {
      color: var(--dig-color-text);
      opacity: 1;
    }
  }
}

/* ==========================================================================
   5. Layer 'utilities'
   ========================================================================== */
@layer utilities {
  /* Text Utilities */
  .dig-text-center {
    text-align: center;
  }
  .dig-text-left {
    text-align: left;
  }
  .dig-text-right {
    text-align: right;
  }
  .dig-text-uppercase {
    text-transform: uppercase;
  }
  .dig-text-lowercase {
    text-transform: lowercase;
  }
  .dig-text-capitalize {
    text-transform: capitalize;
  }
  .dig-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dig-text-wrap-balance {
    text-wrap: balance;
  }
  .dig-text-wrap-pretty {
    text-wrap: pretty;
  }

  /* Color Utilities */
  .dig-text-primary {
    color: var(--dig-color-primary);
  }
  .dig-text-secondary {
    color: var(--dig-color-secondary);
  }
  .dig-text-accent {
    color: var(--dig-color-accent);
  }
  .dig-text-success {
    color: var(--dig-color-success);
  }
  .dig-text-warning {
    color: var(--dig-color-warning);
  }
  .dig-text-danger {
    color: var(--dig-color-danger);
  }
  .dig-text-info {
    color: var(--dig-color-info);
  }
  .dig-text-muted {
    color: var(--dig-color-text-muted);
  }
  .dig-text-light {
    color: var(--dig-color-text-light);
  }

  .dig-bg-primary {
    background-color: var(--dig-color-primary);
  }
  .dig-bg-secondary {
    background-color: var(--dig-color-secondary);
  }
  .dig-bg-accent {
    background-color: var(--dig-color-accent);
  }
  .dig-bg-success {
    background-color: var(--dig-color-success);
  }
  .dig-bg-warning {
    background-color: var(--dig-color-warning);
  }
  .dig-bg-danger {
    background-color: var(--dig-color-danger);
  }
  .dig-bg-info {
    background-color: var(--dig-color-info);
  }
  .dig-bg-light {
    background-color: var(--dig-color-bg);
  }
  .dig-bg-dark {
    background-color: var(--dig-color-bg-alt);
  }

  /* Display Utilities */
  .dig-d-block {
    display: block;
  }
  .dig-d-inline {
    display: inline;
  }
  .dig-d-inline-block {
    display: inline-block;
  }
  .dig-d-flex {
    display: flex;
  }
  .dig-d-inline-flex {
    display: inline-flex;
  }
  .dig-d-grid {
    display: grid;
  }
  .dig-d-none {
    display: none;
  }

  /* Flex Utilities */
  .dig-flex-row {
    flex-direction: row;
  }
  .dig-flex-column {
    flex-direction: column;
  }
  .dig-flex-wrap {
    flex-wrap: wrap;
  }
  .dig-flex-nowrap {
    flex-wrap: nowrap;
  }
  .dig-justify-start {
    justify-content: flex-start;
  }
  .dig-justify-end {
    justify-content: flex-end;
  }
  .dig-justify-center {
    justify-content: center;
  }
  .dig-justify-between {
    justify-content: space-between;
  }
  .dig-justify-around {
    justify-content: space-around;
  }
  .dig-align-start {
    align-items: flex-start;
  }
  .dig-align-end {
    align-items: flex-end;
  }
  .dig-align-center {
    align-items: center;
  }
  .dig-align-baseline {
    align-items: baseline;
  }
  .dig-align-stretch {
    align-items: stretch;
  }

  /* Position Utilities */
  .dig-position-static {
    position: static;
  }
  .dig-position-relative {
    position: relative;
  }
  .dig-position-absolute {
    position: absolute;
  }
  .dig-position-fixed {
    position: fixed;
  }
  .dig-position-sticky {
    position: sticky;
  }

  /* Sizing Utilities */
  .dig-w-25 {
    flex-basis: 25%;
    width: 25%;
  }
  .dig-w-33 {
    flex-basis: 33.333%;
    width: 33.333%;
  }
  .dig-w-50 {
    flex-basis: 50%;
    width: 50%;
  }
  .dig-w-67 {
    flex-basis: 66.666%;
    width: 66.666%;
  }
  .dig-w-75 {
    flex-basis: 75%;
    width: 75%;
  }
  .dig-w-100 {
    flex-basis: 100%;
    width: 100%;
  }
  .dig-h-25 {
    height: 25%;
  }
  .dig-h-50 {
    height: 50%;
  }
  .dig-h-75 {
    height: 75%;
  }
  .dig-h-100 {
    height: 100%;
  }
  .dig-mw-100 {
    max-width: 100%;
  }
  .dig-mh-100 {
    max-height: 100%;
  }

  /* Spacing Utilities */
  .dig-m-0 {
    margin: 0;
  }
  .dig-mt-0 {
    margin-top: 0;
  }
  .dig-mr-0 {
    margin-right: 0;
  }
  .dig-mb-0 {
    margin-bottom: 0;
  }
  .dig-ml-0 {
    margin-left: 0;
  }
  .dig-mx-0 {
    margin-left: 0;
    margin-right: 0;
  }
  .dig-my-0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .dig-p-0 {
    padding: 0;
  }
  .dig-pt-0 {
    padding-top: 0;
  }
  .dig-pr-0 {
    padding-right: 0;
  }
  .dig-pb-0 {
    padding-bottom: 0;
  }
  .dig-pl-0 {
    padding-left: 0;
  }
  .dig-px-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .dig-py-0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Border Utilities */
  .dig-border {
    border: 1px solid var(--dig-color-border);
  }
  .dig-border-top {
    border-top: 1px solid var(--dig-color-border);
  }
  .dig-border-right {
    border-right: 1px solid var(--dig-color-border);
  }
  .dig-border-bottom {
    border-bottom: 1px solid var(--dig-color-border);
  }
  .dig-border-left {
    border-left: 1px solid var(--dig-color-border);
  }
  .dig-border-0 {
    border: 0;
  }
  .dig-rounded {
    border-radius: var(--dig-radius-md);
  }
  .dig-rounded-sm {
    border-radius: var(--dig-radius-sm);
  }
  .dig-rounded-lg {
    border-radius: var(--dig-radius-lg);
  }
  .dig-rounded-full {
    border-radius: var(--dig-radius-full);
  }
  .dig-rounded-top {
    border-top-left-radius: var(--dig-radius-md);
    border-top-right-radius: var(--dig-radius-md);
  }
  .dig-rounded-right {
    border-top-right-radius: var(--dig-radius-md);
    border-bottom-right-radius: var(--dig-radius-md);
  }
  .dig-rounded-bottom {
    border-bottom-right-radius: var(--dig-radius-md);
    border-bottom-left-radius: var(--dig-radius-md);
  }
  .dig-rounded-left {
    border-top-left-radius: var(--dig-radius-md);
    border-bottom-left-radius: var(--dig-radius-md);
  }

  /* Shadow Utilities */
  .dig-shadow-sm {
    box-shadow: var(--dig-shadow-sm);
  }
  .dig-shadow-md {
    box-shadow: var(--dig-shadow-md);
  }
  .dig-shadow-lg {
    box-shadow: var(--dig-shadow-lg);
  }
  .dig-shadow-xl {
    box-shadow: var(--dig-shadow-xl);
  }
  .dig-shadow-none {
    box-shadow: none;
  }

  /* Opacity Utilities */
  .dig-opacity-0 {
    opacity: 0;
  }
  .dig-opacity-25 {
    opacity: 0.25;
  }
  .dig-opacity-50 {
    opacity: 0.5;
  }
  .dig-opacity-75 {
    opacity: 0.75;
  }
  .dig-opacity-100 {
    opacity: 1;
  }

  /* Overflow Utilities */
  .dig-overflow-auto {
    overflow: auto;
  }
  .dig-overflow-hidden {
    overflow: hidden;
  }
  .dig-overflow-visible {
    overflow: visible;
  }
  .dig-overflow-scroll {
    overflow: scroll;
  }
  .dig-overflow-x-auto {
    overflow-x: auto;
  }
  .dig-overflow-y-auto {
    overflow-y: auto;
  }
  .dig-overflow-x-hidden {
    overflow-x: hidden;
  }
  .dig-overflow-y-hidden {
    overflow-y: hidden;
  }

  /* Z-index Utilities */
  .dig-z-index-dropdown {
    z-index: var(--dig-z-index-dropdown);
  }
  .dig-z-index-sticky {
    z-index: var(--dig-z-index-sticky);
  }
  .dig-z-index-fixed {
    z-index: var(--dig-z-index-fixed);
  }
  .dig-z-index-modal {
    z-index: var(--dig-z-index-modal);
  }
  .dig-z-index-popover {
    z-index: var(--dig-z-index-popover);
  }
  .dig-z-index-tooltip {
    z-index: var(--dig-z-index-tooltip);
  }
  .dig-z-index-toast {
    z-index: var(--dig-z-index-toast);
  }

  /* Interaction Utilities */
  .dig-pointer-events-none {
    pointer-events: none;
  }
  .dig-pointer-events-auto {
    pointer-events: auto;
  }
  .dig-user-select-none {
    user-select: none;
  }
  .dig-user-select-auto {
    user-select: auto;
  }
  .dig-cursor-pointer {
    cursor: pointer;
  }
  .dig-cursor-default {
    cursor: default;
  }
  .dig-cursor-not-allowed {
    cursor: not-allowed;
  }

  /* Visibility Utilities */
  .dig-visible {
    visibility: visible;
  }
  .dig-invisible {
    visibility: hidden;
  }

  /* Content Optimization */
  .dig-content-optimized {
    content-visibility: auto;
    contain: layout paint style;
  }

  /* Web API State Helpers */
  [data-dig-visible="false"] {
    display: none !important;
  }
  [data-dig-interactive] {
    cursor: pointer;
  }
  [data-dig-state="active"] {
    background-color: var(--dig-color-accent);
  }
  [data-dig-color="accent"] {
    color: var(--dig-color-accent);
  }
  [data-dig-bg="primary"] {
    background: var(--dig-color-primary);
    color: #fff;
  }

  /*
  * Prevents FOUC for conditional fields.
  * It hides any element with conditions until the JS engine has initialized it.
  */
  [data-conditions]:not([data-conditions-initialized]) {
    display: none;
  }

  /* Screen reader only (visually hidden but accessible) */
  .dig-sr-only,
  .dig-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Show on focus for better keyboard navigation */
  .dig-show-on-focus:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* ARIA hidden utility selector (attribute-based) */
  .dig-site-wrapper [aria-hidden="true"],
  .dig-admin-context [aria-hidden="true"] {
    visibility: hidden;
  }

  /* Focus ring variant for better accessibility */
  .dig-focus-ring {
    outline: 2px solid var(--dig-color-accent);
    outline-offset: 4px;
  }

  /* Quick Grid Helpers */
  .dig-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dig-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dig-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Quick Flex Helpers */
  .dig-row {
    display: flex;
    flex-direction: row;
    gap: var(--dig-spacing-sm);
  }

  .dig-col {
    display: flex;
    flex-direction: column;
    gap: var(--dig-spacing-sm);
  }

  .dig-center {
    justify-content: center;
    align-items: center;
  }

  .dig-space-between {
    justify-content: space-between;
  }

  .dig-wrap {
    flex-wrap: wrap;
  }

  /* Digentus State Helpers */
  .dig-hidden {
    display: none !important;
  }

  .dig-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .dig-loading {
    cursor: progress;
    opacity: 0.6;
    pointer-events: none;
  }

  .dig-loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .dig-active {
    background-color: var(--dig-color-accent);
    color: var(--dig-color-text-light);
  }

  .dig-success {
    background-color: var(--dig-color-success);
    color: var(--dig-color-text-light);
  }

  .dig-warning {
    background-color: var(--dig-color-warning);
    color: var(--dig-color-primary);
  }

  .dig-error {
    background-color: var(--dig-color-danger);
    color: var(--dig-color-text-light);
  }
}

/* ==========================================================================
   6. Layer 'animations' & Transitions
   ==========================================================================
*/
@layer animations {
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes slideInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(20px);
      opacity: 0;
    }
  }

  @keyframes loading-skeleton {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  .dig-animate-spin {
    animation: spin var(--dig-animation-duration) linear infinite;
  }

  .dig-animate-fadeIn {
    animation: fadeIn var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-fadeOut {
    animation: fadeOut var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-slideInUp {
    animation: slideInUp var(--dig-animation-duration) ease forwards;
  }

  .dig-animate-slideOutDown {
    animation: slideOutDown var(--dig-animation-duration) ease forwards;
  }

  .dig-transition-all {
    transition: all var(--dig-transition-base);
  }

  .dig-transition-colors {
    transition: color var(--dig-transition-base),
      background-color var(--dig-transition-base),
      border-color var(--dig-transition-base);
  }

  .dig-transition-opacity {
    transition: opacity var(--dig-transition-base);
  }

  .dig-transition-transform {
    transition: transform var(--dig-transition-base);
  }
}

/* ==========================================================================
   7. Layer 'admin' - WordPress Admin Coexistence
   ========================================================================== */
@layer admin {
  /*
  Override for Form Controls
  Selector: .dig-admin-context (class) + input (tag) + .dig-form-control (class)
  Specificity: (0, 2, 1) - Extremely high and targeted.
  */
  .dig-admin-context {
    --dig-form-control-padding: var(--dig-spacing-xs);
  }
  .dig-admin-context input.dig-form-control,
  .dig-admin-context textarea.dig-form-control,
  .dig-admin-context select.dig-form-control {
    /* Re-declare ALL properties to ensure a complete override */
    width: 100%;
    margin: 0;
    padding: var(--dig-spacing-xs) var(--dig-spacing-sm);
    font-size: var(--dig-font-size-base);
    color: var(--dig-color-text);
    background-color: var(--dig-color-bg);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    box-shadow: none;
    line-height: 1.5;
    transition: border-color var(--dig-transition-fast),
      box-shadow var(--dig-transition-fast);
  }
  /* Also override the focus state with high specificity */
  .dig-admin-context input.dig-form-control:focus,
  .dig-admin-context textarea.dig-form-control:focus,
  .dig-admin-context select.dig-form-control:focus {
    border-color: var(--dig-color-primary);
    box-shadow: 0 0 0 1px var(--dig-color-primary);
  }
  /**
  Layout Spacing Fix
  Adds a consistent vertical gap between form rows.
  */
  .dig-admin-context .dig-form-row {
    margin-bottom: var(--dig-spacing-md);
  }
  .dig-admin-context .dig-form-row:last-child {
    margin-bottom: 0;
  }
  /**
  Override for Buttons
  Selector: .dig-admin-context (class) + .dig-btn (class)
  Specificity: (0, 2, 0) - High enough to win.
  */
  .dig-admin-context .dig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dig-color-primary);
    color: var(--dig-color-text-light);
    border: none;
    border-radius: var(--dig-radius-full);
    padding: var(--dig-spacing-xs) var(--dig-spacing-md);
    font-size: var(--dig-font-size-base);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    text-shadow: none;
    text-decoration: none;
    cursor: pointer;
  }
  /* Override for button variants */
  .dig-admin-context .dig-btn.dig-btn-outline {
    background: transparent;
    color: var(--dig-color-primary);
    border: 2px solid var(--dig-color-primary);
  }
  /*
  ========================================================================
  Component Overrides: Branding Admin UI
  ========================================================================
  */
  .dig-admin-context .branding-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--dig-spacing-md);
    padding-bottom: var(--dig-spacing-sm);
    border-bottom: 1px solid var(--dig-color-border);
  }
  .dig-admin-context .branding-sidebar-header h2 {
    margin-bottom: 0;
    font-size: 1.3em;
  }
  .dig-admin-context .branding-controls h3 {
    margin-top: var(--dig-spacing-lg);
    margin-bottom: var(--dig-spacing-sm);
    font-size: 1em;
    text-transform: uppercase;
    color: var(--dig-color-text-muted);
    letter-spacing: 0.5px;
  }
  /* ========================================================================
  Component Overrides: Branding Admin UI - Color Picker Fix
  ======================================================================== */
  .dig-admin-context .dig-form-control[type="color"] {
    display: block;
    width: 100%;
    height: 36px;
    max-width: 40px;
    padding: var(--dig-spacing-xs);
    border: 1px solid var(--dig-color-border);
    border-radius: var(--dig-radius-md);
    background-color: var(--dig-color-bg);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  .dig-admin-context .dig-form-control[type="color"]:focus {
    border-color: var(--dig-color-primary);
    box-shadow: 0 0 0 1px var(--dig-color-primary);
    outline: none;
  }

  .dig-admin-context,
  .dig-admin-context *,
  .dig-admin-context *::before,
  .dig-admin-context *::after {
    box-sizing: border-box;
  }

  /* This ensures that component styles win the specificity war against core WP styles. */

  /* Badge Component Boost */
  .dig-admin-context .dig-badge {
    /* Re-assert the base styles with higher specificity */
    display: inline-block;
    padding: var(--dig-spacing-xxs) var(--dig-spacing-xs);
    font-size: var(--dig-font-size-small);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: var(--dig-radius-full);
  }

  /* Form Group & Input Component Boost */
  .dig-admin-context .dig-form-group {
    margin-bottom: var(--dig-spacing-md);
  }

  .dig-admin-context .dig-form-label {
    display: block;
    margin-bottom: var(--dig-spacing-xs);
    font-weight: 600;
  }
}

/* ==========================================================================
   EOF
   ========================================================================== */