/**
 * ============================================================================
 * 🌑 K2 Shadow Utilities
 * ----------------------------------------------------------------------------
 * Apply depth to UI elements using predefined theme shadows. Can be combined
 * with borders, radius, or other utilities.
 *
 * Usage Examples:
 * ----------------------------------------------------------------------------
 * <div class="k2-card k2-shadow-sm k2-radius-md">Small shadow card</div>
 * <button class="k2-btn k2-shadow-md k2-radius-lg">Button with shadow</button>
 * <input type="text" class="k2-input k2-shadow-xs k2-radius-sm">
 * ============================================================================
 */
.k2-shadow-xs { box-shadow: var(--k2-shadow-xs) !important; }
.k2-shadow-sm { box-shadow: var(--k2-shadow-sm) !important; }
.k2-shadow-md { box-shadow: var(--k2-shadow-md) !important; }
.k2-shadow-lg { box-shadow: var(--k2-shadow-lg) !important; }





/**
 * ============================================================================
 * 🧱 K2 Border Utilities
 * ----------------------------------------------------------------------------
 * Provides a comprehensive set of classes for consistent borders across the
 * UI framework. Supports width, style, color, and radius, using theme tokens
 * for maintainability.
 *
 * Naming Conventions:
 * ----------------------------------------------------------------------------
 * 1️⃣ Border Width
 *    .k2-border-0    → No border
 *    .k2-border-sm   → Thin border (~1px)
 *    .k2-border-md   → Medium border (~2px)
 *    .k2-border-lg   → Thick border (~4px)
 *
 * 2️⃣ Border Style
 *    .k2-border-solid   → Solid border
 *    .k2-border-dashed  → Dashed border
 *    .k2-border-dotted  → Dotted border
 *    .k2-border-double  → Double border
 *
 * 3️⃣ Border Color (from theme)
 *    .k2-border-primary
 *    .k2-border-secondary
 *    .k2-border-accent
 *    .k2-border-muted
 *    .k2-border-success
 *    .k2-border-warning
 *    .k2-border-danger
 *    .k2-border-info
 *
 * 4️⃣ Border Radius
 *    .k2-radius-sm    → Small radius (2px)
 *    .k2-radius-md    → Medium radius (6px)
 *    .k2-radius-lg    → Large radius (8px)
 *    .k2-radius-xl    → Extra large radius (16px)
 *    .k2-radius-full  → Fully rounded (circular or pill)
 *
 * Usage Examples:
 * ----------------------------------------------------------------------------
 * <div class="k2-border k2-border-sm k2-border-solid k2-border-accent k2-radius-md">
 *   Card content
 * </div>
 * <input type="text" class="k2-input k2-border k2-border-md k2-border-primary k2-radius-sm">
 * <button class="k2-btn k2-border k2-border-lg k2-border-danger k2-radius-full">
 *   Danger Button
 * </button>
 * ============================================================================
 */

/* ------------------------------
   Base border class (applies style & default color)
------------------------------ */
.k2-border {
  border-style: solid;
  border-color: var(--k2-color-border, #ccc); /* Default theme border */
}

/* ------------------------------
   Border Width
------------------------------ */
.k2-border-0 { border-width: 0 !important; }
.k2-border-sm { border-width: var(--k2-border-width-sm) !important; }
.k2-border-md { border-width: var(--k2-border-width-md) !important; }
.k2-border-lg { border-width: var(--k2-border-width-lg) !important; }

/* ------------------------------
   Border Styles
------------------------------ */
.k2-border-solid  { border-style: solid !important; }
.k2-border-dashed { border-style: dashed !important; }
.k2-border-dotted { border-style: dotted !important; }
.k2-border-double { border-style: double !important; }

/* ------------------------------
   Border Colors (Theme Tokens)
------------------------------ */
.k2-border-primary   { border-color: var(--k2-color-primary) !important; }
.k2-border-secondary { border-color: var(--k2-color-secondary) !important; }
.k2-border-accent    { border-color: var(--k2-color-accent) !important; }
.k2-border-muted     { border-color: var(--k2-color-muted) !important; }
.k2-border-muted-strong     { border-color: var(--k2-color-muted-strong) !important; }
.k2-border-success   { border-color: var(--k2-color-success) !important; }
.k2-border-warning   { border-color: var(--k2-color-warning) !important; }
.k2-border-danger    { border-color: var(--k2-color-danger) !important; }
.k2-border-info      { border-color: var(--k2-color-info) !important; }

/* ------------------------------
   Border Radius (Theme Tokens)
------------------------------ */
.k2-radius-sm   { border-radius: var(--k2-radius-sm) !important; }
.k2-radius-md   { border-radius: var(--k2-radius-md) !important; }
.k2-radius-lg   { border-radius: var(--k2-radius-lg) !important; }
.k2-radius-xl   { border-radius: var(--k2-radius-xl) !important; }
.k2-radius-full { border-radius: var(--k2-radius-full) !important; }


/* Default K2 enhancement */
.k2-summary {
  list-style: none; /* Removes the boring triangle */
  cursor: pointer;
  position: relative;
  padding-left: 1.5rem;
}

.k2-summary::before {
  content: "➕";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

details[open] > .k2-summary::before {
  content: "➖";
}