/* ============================================
   UX/1 — DESIGN SYSTEM BASE
   Mi-Bodega-POS — Sistema Visual Base
   ============================================ */

/* ---------- ROOT TOKENS ---------- */
:root{

  /* ---------- PALETA PANTONE (NUEVA IDENTIDAD VISUAL) ---------- */
  /* Meditative State - azul pálido calmante */
  --color-meditative: #C8ECF4;
  --color-meditative-light: #E0F4FA;
  --color-meditative-dark: #A8D8E8;
  /* Pure Bliss (Sheer Bliss) - crema cálido */
  --color-bliss: #DBCABA;
  --color-bliss-light: #E8DCCC;
  --color-bliss-dark: #C8B8A8;
  /* Tender Pause - rosa suave */
  --color-tender: #F3D4DF;
  --color-tender-light: #FAE8EF;
  --color-tender-dark: #E8C0CE;
  /* Quiet Cocoon - beige cálido */
  --color-cocoon: #C9B27C;
  --color-cocoon-light: #D8C8A0;
  --color-cocoon-dark: #B8A068;
  /* Honey Dip (Honey) - dorado/ámbar */
  --color-honey: #BA9238;
  --color-honey-light: #D4A84A;
  --color-honey-dark: #9D7A2E;
  /* Stolen Moment - rosa marrón apagado */
  --color-stolen: #C8A8A0;
  --color-stolen-light: #D8C0B8;
  --color-stolen-dark: #B09088;

  /* ---------- COLORES SEMÁNTICOS DE MARCA ---------- */
  --color-primary: var(--color-honey);
  --color-primary-light: var(--color-honey-light);
  --color-primary-dark: var(--color-honey-dark);
  --color-secondary: var(--color-cocoon);
  --color-secondary-light: var(--color-cocoon-light);
  --color-secondary-dark: var(--color-cocoon-dark);
  --color-accent: var(--color-tender);
  --color-accent-light: var(--color-tender-light);
  --color-accent-dark: var(--color-tender-dark);
  --color-calm: var(--color-meditative);
  --color-calm-light: var(--color-meditative-light);
  --color-calm-dark: var(--color-meditative-dark);
  --color-bliss-token: var(--color-bliss);
  --color-stolen-token: var(--color-stolen);

  /* ---------- BASE (FONDO CLARO CÁLIDO) ---------- */
  --color-bg: #FDFBF7;
  --color-bg-secondary: #F5F0E8;
  --color-surface: #FFFFFF;
  --color-surface-hover: #FAF6F0;
  --color-border: #E8E0D0;
  --color-border-light: #F0E8D8;
  --color-text-primary: #2D2A26;
  --color-text-secondary: #5A5550;
  --color-text-muted: #8A8580;
  --color-text-placeholder: #A8A39E;

  /* ---------- ESTADOS (semánticos, independientes de marca) ---------- */
  --color-success: #10B981;
  --color-success-light: #34D399;
  --color-success-dim: #059669;
  --color-success-bg: rgba(16,185,129,0.08);
  --color-success-border: rgba(16,185,129,0.20);
  --color-success-glow: rgba(16,185,129,0.15);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245,158,11,0.08);
  --color-warning-border: rgba(245,158,11,0.20);
  --color-error: #EF4444;
  --color-error-bg: rgba(239,68,68,0.08);
  --color-error-border: rgba(239,68,68,0.20);
  --color-overdue-bg: rgba(245,158,11,0.08);
  --color-overdue-border: rgba(245,158,11,0.20);
  --color-info: var(--color-calm);
  --color-info-text: #1E4D5C;
  --color-info-bg: rgba(200,236,244,0.15);
  --color-info-border: rgba(200,236,244,0.30);

  /* ---------- MÉTODOS DE PAGO ---------- */
  --color-yape: #7B2FFF;
  --color-plin: #0077FF;
  --color-cash: #10B981;
  --color-fiado: var(--color-warning);
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 15px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-price: 22px;
  --font-total: 32px;
  --font-display: 36px;

  /* ---------- ESPACIADO (escala 4px) ---------- */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---------- CONTROLES ---------- */
  --control-h-sm: 40px;
  --control-h-md: 48px;
  --control-h-lg: 56px;

  /* ---------- BORDER RADIUS ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---------- SOMBRAS (suaves, cálidas) ---------- */
  --shadow-xs: 0 1px 2px rgba(45,42,38,0.06);
  --shadow-sm: 0 2px 8px rgba(45,42,38,0.08);
  --shadow-md: 0 4px 16px rgba(45,42,38,0.10);
  --shadow-lg: 0 8px 32px rgba(45,42,38,0.12);
  --shadow-glow-primary: 0 0 20px rgba(186,146,56,0.20);
  --shadow-glow-success: 0 0 20px rgba(16,185,129,0.15);
  --shadow-glow-calm: 0 0 20px rgba(200,236,244,0.30);

  /* ---------- FOCUS ---------- */
  --ring-focus: 0 0 0 3px rgba(186,146,56,0.25);
  --ring-error: 0 0 0 3px rgba(239,68,68,0.30);
  --ring-success: 0 0 0 3px rgba(16,185,129,0.30);

  /* ---------- TRANSICIONES ---------- */
  --transition-fast: 0.05s ease;
  --transition-normal: 0.12s ease;
  --transition-slow: 0.15s ease;

  /* ---------- NATIVOS CLAROS ---------- */
  color-scheme: light;
  accent-color: var(--color-primary);
}

/* ---------- BASE GLOBAL ---------- */
body{
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.pos{
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* ---------- COMPONENTE: BUTTON ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  min-height: var(--control-h-md);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-sm);
  transition: background var(--transition-normal), border-color var(--transition-normal), color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-fast);
}

.btn:active{
  transform: translateY(1px);
}

.btn-primary{
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover{
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-glow-primary);
}

.btn-secondary{
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-light);
}
.btn-secondary:hover{
  background: var(--color-border);
  border-color: var(--color-text-muted);
}

.btn-success{
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}
.btn-success:hover{
  background: var(--color-success-light);
  border-color: var(--color-success-light);
}

.btn-danger{
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}
.btn-danger:hover{
  background: #DC2626;
  border-color: #DC2626;
}

.btn-ghost{
  background: transparent;
  color: var(--color-text-primary);
  border-color: transparent;
}
.btn-ghost:hover{
  background: var(--color-surface-hover);
}

.btn-calm{
  background: var(--color-calm);
  color: var(--color-text-primary);
  border-color: var(--color-calm-dark);
}
.btn-calm:hover{
  background: var(--color-calm-light);
  border-color: var(--color-calm);
}

/* ---------- COMPONENTE: INPUT ---------- */
.input{
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--control-h-md);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-base);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.input:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--ring-focus);
}

.input::placeholder{
  color: var(--color-text-placeholder);
}

/* ---------- COMPONENTE: CARD ---------- */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.card:hover{
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* ---------- COMPONENTE: BADGE ---------- */
.badge{
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  line-height: 1;
  padding: var(--space-0) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge-success{
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.badge-warning{
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}

.badge-error{
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.badge-info{
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
}

.badge-primary{
  background: rgba(186,146,56,0.12);
  color: var(--color-primary-dark);
  border: 1px solid rgba(186,146,56,0.25);
}

.badge-calm{
  background: rgba(200,236,244,0.20);
  color: #1E4D5C;
  border: 1px solid rgba(200,236,244,0.40);
}

.badge-bliss{
  background: rgba(219,202,186,0.20);
  color: #7A6A5A;
  border: 1px solid rgba(219,202,186,0.40);
}

.badge-tender{
  background: rgba(243,212,223,0.20);
  color: #7A5A65;
  border: 1px solid rgba(243,212,223,0.40);
}

.badge-cocoon{
  background: rgba(201,178,124,0.20);
  color: #6B5E42;
  border: 1px solid rgba(201,178,124,0.40);
}

/* ---------- UTILIDADES DE TEXTO ---------- */
.text-primary{ color: var(--color-text-primary); }
.text-secondary{ color: var(--color-text-secondary); }
.text-muted{ color: var(--color-text-muted); }
.text-success{ color: var(--color-success); }
.text-warning{ color: var(--color-warning); }
.text-error{ color: var(--color-error); }
.text-info{ color: var(--color-info-text); }
.text-primary-brand{ color: var(--color-primary); }
.text-primary-brand-light{ color: var(--color-primary-light); }
.text-primary-brand-dark{ color: var(--color-primary-dark); }
.text-secondary-brand{ color: var(--color-secondary); }
.text-accent{ color: var(--color-accent); }
.text-calm{ color: var(--color-calm-dark); }
.text-bliss{ color: #7A6A5A; }
.text-stolen{ color: #7A6A65; }

/* ---------- UTILIDADES DE FONDO ---------- */
.bg-primary{ background: var(--color-bg); }
.bg-surface{ background: var(--color-surface); }
.bg-surface-hover{ background: var(--color-surface-hover); }
.bg-success{ background: var(--color-success-bg); }
.bg-warning{ background: var(--color-warning-bg); }
.bg-error{ background: var(--color-error-bg); }
.bg-info{ background: var(--color-info-bg); }
.bg-primary-brand{ background: var(--color-primary); }
.bg-primary-brand-light{ background: var(--color-primary-light); }
.bg-calm{ background: var(--color-calm); }
.bg-calm-light{ background: var(--color-calm-light); }
.bg-bliss{ background: var(--color-bliss-token); }
.bg-tender{ background: var(--color-accent); }
.bg-cocoon{ background: var(--color-secondary); }
.bg-stolen{ background: var(--color-stolen-token); }

/* ---------- BORDES UTILIDADES ---------- */
.border{ border: 1px solid var(--color-border); }
.border-light{ border: 1px solid var(--color-border-light); }
.border-success{ border-color: var(--color-success-border); }
.border-error{ border-color: var(--color-error-border); }
.border-info{ border-color: var(--color-info-border); }
.border-primary{ border-color: var(--color-primary); }
.border-calm{ border-color: var(--color-calm); }

/* ---------- FLEX & LAYOUT BASE ---------- */
.flex{ display: flex; }
.flex-col{ display: flex; flex-direction: column; }
.flex-center{ display: flex; align-items: center; justify-content: center; }
.flex-wrap{ flex-wrap: wrap; }
.gap-2{ gap: var(--space-2); }
.gap-3{ gap: var(--space-3); }
.gap-4{ gap: var(--space-4); }
.gap-6{ gap: var(--space-6); }

/* ---------- DISPLAY UTILITIES ---------- */
.hidden{ display: none !important; }
.block{ display: block; }
.inline-block{ display: inline-block; }

/* ---------- FOCUS VISIBLE GLOBAL ---------- */
:focus-visible{
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- TOOLTIP STYLE (referencia futura) ---------- */
.ds-tooltip{
  position: relative;
}
.ds-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.ds-tooltip:hover::after{
  opacity: 1;
}

/* ---------- SCROLLBAR STYLE (referencia futura) ---------- */
.ds-scroll::-webkit-scrollbar{
  width: 6px;
}
.ds-scroll::-webkit-scrollbar-track{
  background: var(--color-bg);
}
.ds-scroll::-webkit-scrollbar-thumb{
  background: var(--color-border-light);
  border-radius: var(--radius-pill);
}
.ds-scroll::-webkit-scrollbar-thumb:hover{
  background: var(--color-text-muted);
}

/* ============================================
   COMPONENTES EXTENDIDOS - UX/2
   ============================================ */

/* ---------- BUTTON SIZE VARIANTS ---------- */
.btn-sm{
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-xs);
  gap: var(--space-1);
}
.btn-lg{
  min-height: var(--control-h-lg);
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-base);
  gap: var(--space-3);
}

/* ---------- ICON BUTTONS ---------- */
.btn-icon{
  padding: var(--space-2);
  min-width: var(--control-h-md);
}
.btn-icon-sm{
  padding: var(--space-1);
  min-width: var(--control-h-sm);
}
.btn-icon-lg{
  padding: var(--space-3);
  min-width: var(--control-h-lg);
}

/* ---------- INPUT VARIANTS ---------- */
.input-sm{
  min-height: var(--control-h-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-sm);
}
.input-lg{
  min-height: var(--control-h-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-lg);
}
.input-search{
  padding-left: var(--space-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-3) center;
}
.input-error{
  border-color: var(--color-error);
}
.input-error:focus{
  border-color: var(--color-error);
  box-shadow: var(--ring-error);
}
.input-success{
  border-color: var(--color-success);
}
.input-success:focus{
  border-color: var(--color-success);
  box-shadow: var(--ring-success);
}

/* ---------- SELECT STYLING ---------- */
.select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-10);
}
.select:focus{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23BA9238' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- TEXTAREA ---------- */
.textarea{
  min-height: 100px;
  resize: vertical;
  font-family: var(--font-ui);
}

/* ---------- CARD VARIANTS ---------- */
.card-sm{
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}
.card-lg{
  padding: var(--space-6);
  border-radius: var(--radius-xl);
}
.card-interactive{
  cursor: pointer;
}
.card-interactive:hover{
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* ---------- BADGE VARIANTS ---------- */
.badge-sm{
  font-size: 10px;
  padding: var(--space-0) var(--space-1);
}
.badge-lg{
  font-size: var(--font-sm);
  padding: var(--space-1) var(--space-3);
}
.badge-pill{
  border-radius: var(--radius-pill);
}
.badge-dot{
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  padding: 0;
}
.badge-dot-success{ background: var(--color-success); }
.badge-dot-warning{ background: var(--color-warning); }
.badge-dot-error{ background: var(--color-error); }
.badge-dot-info{ background: var(--color-info); }
.badge-dot-primary{ background: var(--color-primary); }
.badge-dot-calm{ background: var(--color-calm-dark); }
.badge-dot-cocoon{ background: var(--color-secondary); }
.badge-dot-honey{ background: var(--color-honey); }
.badge-dot-tender{ background: var(--color-accent); }
.badge-dot-bliss{ background: var(--color-bliss-dark); }
.badge-dot-stolen{ background: var(--color-stolen); }

/* ---------- TOAST / FEEDBACK ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  pointer-events: none;
  animation: toast-in var(--transition-normal) ease-out;
  max-width: min(420px, calc(100vw - var(--space-6)));
}
.toast-success{
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}
.toast-warning{
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid var(--color-warning-border);
}
.toast-error{
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}
.toast-info{
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid var(--color-info-border);
}
@keyframes toast-in{
  from{ opacity: 0; transform: translate(-50%, var(--space-4)); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- MODAL BASE ---------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: var(--overlay-rgba);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: var(--space-4);
}
.modal-box{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--transition-normal) ease-out;
}
@keyframes modal-in{
  from{ opacity: 0; transform: translateY(6px) scale(0.99); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.modal-title{
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-md);
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}
.modal-actions{
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.modal-actions .btn{ flex: 1; }
.modal-close{
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover{
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* ---------- SEARCH FIELD ---------- */
.search-field{
  position: relative;
  display: flex;
  align-items: center;
}
.search-field .input{
  padding-left: var(--space-10);
}
.search-field .icon{
  position: absolute;
  left: var(--space-3);
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-field-clear{
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-field-clear:hover{
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* ---------- CHIP / TAG ---------- */
.chip{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--font-sm);
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--transition-normal), background var(--transition-normal), color var(--transition-normal);
}
.chip:hover{
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
}
.chip-active{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.chip-avatar{
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* ---------- SKELETON / LOADING ---------- */
.skeleton{
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-hover) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---------- DIVIDER ---------- */
.divider{
  height: 1px;
  background: var(--color-border);
  border: none;
}
.divider-dashed{
  border-style: dashed;
}

/* ---------- FOCUS RING UTILITIES ---------- */
.focus-ring{
  outline: none;
}
.focus-ring:focus-visible{
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}
.focus-ring-error:focus-visible{
  box-shadow: var(--ring-error);
}
.focus-ring-success:focus-visible{
  box-shadow: var(--ring-success);
}