/* ========================================
   BPMS DESIGN SYSTEM — token core
   styles.css v3.0 (Clean Architecture)
   ======================================== */

/* ========================================
   :root — DESIGN TOKENS (Primitivos y Aliases)
   ======================================== */
:root {
  /* ========== PRIMITIVE COLORS ========== */

  /* Colors - Yellow */
  --color-yellow-100: #fcf3dd;
  --color-yellow-200: #f9e8bc;
  --color-yellow-300: #f7dc9a;
  --color-yellow-400: #f4d179;
  --color-yellow-500: #f1c557;
  --color-yellow-600: #c19e46;
  --color-yellow-700: #987d3b;
  --color-yellow-800: #604f23;
  --color-yellow-900: #302711;

  /* Colors - Blue */
  --color-blue-100: #e9efff;
  --color-blue-200: #d3deff;
  --color-blue-300: #a7bdff;
  --color-blue-400: #7b9cff;
  --color-blue-500: #2759cc;
  --color-blue-600: #1a48b1;
  --color-blue-700: #143685;
  --color-blue-800: #0d2459;
  --color-blue-900: #06122d;

  /* Colors - Dark */
  --color-dark-100: #d3d2d4;
  --color-dark-200: #a6a6a9;
  --color-dark-300: #7a797d;
  --color-dark-400: #4d4d52;
  --color-dark-500: #212027;
  --color-dark-600: #1a1a1f;
  --color-dark-700: #141317;
  --color-dark-800: #0d0d10;
  --color-dark-900: #070608;

  /* Colors - Dark Variation */
  --color-dark-variation-100: #d5d5d6;
  --color-dark-variation-200: #ababae;
  --color-dark-variation-300: #828185;
  --color-dark-variation-400: #58575d;
  --color-dark-variation-500: #2e2d34;
  --color-dark-variation-600: #25242a;
  --color-dark-variation-700: #1c1b1f;
  --color-dark-variation-800: #121215;
  --color-dark-variation-900: #09090a;

  /* Colors - Light */
  --color-light-100: #f7f7f7;
  --color-light-200: #f0f0f0;
  --color-light-300: #e8e8e8;
  --color-light-400: #e1e1e1;
  --color-light-500: #d9d9d9;
  --color-light-600: #aeaeae;
  --color-light-700: #828282;
  --color-light-800: #575757;
  --color-light-900: #2b2b2b;

  /* Colors - Information */
  --color-information-100: #d6e6f4;
  --color-information-200: #adcde9;
  --color-information-300: #85b5dd;
  --color-information-400: #5c9cd2;
  --color-information-500: #3383c7;
  --color-information-600: #29699f;
  --color-information-700: #1f4f77;
  --color-information-800: #143450;
  --color-information-900: #0a1a28;

  /* Colors - Success */
  --color-success-100: #dcf5e3;
  --color-success-200: #b8eac6;
  --color-success-300: #95e0aa;
  --color-success-400: #71d58d;
  --color-success-500: #4ecb71;
  --color-success-600: #3ea25a;
  --color-success-700: #2f7a44;
  --color-success-800: #1f512d;
  --color-success-900: #102917;

  /* Colors - Error */
  --color-error-100: #fcdcd2;
  --color-error-200: #fab8a5;
  --color-error-300: #f79578;
  --color-error-400: #f5714b;
  --color-error-500: #f24e1e;
  --color-error-600: #c23e18;
  --color-error-700: #912f12;
  --color-error-800: #611f0c;
  --color-error-900: #301006;

  /* Colors - Purple (Obsidiana Base) */
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;

  /* Colors - Indigo (Plata Base) */
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #4f46e5;
  --color-indigo-600: #4338ca;
  --color-indigo-700: #3730a3;
  --color-indigo-800: #312e81;
  --color-indigo-900: #1e1b4b;

  /* ========== SEMANTIC ALIAS COLORS (Standard Dark — Base) ========== */

  /* Surface Hierarchy */
  --color-surface-background: #212027; /* N0 */
  --color-surface-headers: #141317; /* N1 */
  --color-surface-variation: #25242a; /* N2 */
  --color-surface-variation-alt: #1c1b1f; /* N3 */

  /* Buttons */
  --color-button-primary-default: var(--color-yellow-500);
  --color-button-primary-hover: var(--color-yellow-600);
  --color-button-primary-disabled: var(--color-dark-700);
  --color-button-primary-text: var(--color-dark-900);
  --color-button-secondary-default: var(--color-dark-variation-500);
  --color-button-secondary-hover: var(--color-dark-variation-400);
  --color-button-secondary-disabled: var(--color-dark-700);
  --color-button-tertiary-default: var(--color-yellow-500);
  --color-button-tertiary-hover: var(--color-yellow-600);
  --color-button-tertiary-bg-hover: var(--color-dark-variation-600);

  /* Text Containers (Inputs) */
  --color-text-container-default: #2c2b33;
  --color-text-container-active: #383741;
  --color-text-container-disabled: #25242a;

  /* Tab Components */
  --color-tab-hover: var(--color-text-container-active);
  --color-tab-background: var(--color-surface-background);

  /* Text - Headings */
  --color-text-heading-primary: var(--color-light-100);
  --color-text-heading-secondary: var(--color-light-400);
  --color-text-heading-tertiary: var(--color-light-600);
  --color-text-heading-disabled: var(--color-light-800);

  /* Text - Body */
  --color-text-body-primary: var(--color-light-100);
  --color-text-body-secondary: var(--color-light-400);
  --color-text-body-tertiary: var(--color-light-600);
  --color-text-body-disabled: var(--color-light-800);

  /* Text - Links */
  --color-text-link-default: var(--color-yellow-500);
  --color-text-link-hover: var(--color-yellow-600);
  --color-text-link-active: var(--color-yellow-400);

  /* Borders */
  --color-border-active: var(--color-yellow-500);
  --color-border-primary: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.06);
  --color-border-disabled: rgba(255, 255, 255, 0.03);

  /* Icons */
  --color-icon-primary: var(--color-text-heading-primary);
  --color-icon-secondary: var(--color-text-heading-secondary);

  /* Status Colors — Standard Dark */
  --status-todo-color: #388bfd;
  --status-overdue-color: #f85149;
  --status-warning-color: #d29922;
  --status-success-color: #3fb950;
  --status-canceled-color: #8b949e;
  --status-unknown-color: #9b6bff;

  /* Tooltip Glass — Standard Dark */
  --color-tooltip-background: rgba(33, 32, 39, 0.85);
  --color-tooltip-text: #ffffff;
  --color-tooltip-border: rgba(255, 255, 255, 0.15);
  --color-tooltip-shadow: rgba(0, 0, 0, 0.4);
  --color-tooltip-key-bg: rgba(255, 255, 255, 0.15);
  --color-tooltip-key-border: rgba(255, 255, 255, 0.05);

  /* Table Zebra — Standard Dark: mezcla MÁS suave (8% para sutileza máxima) */
  --color-table-zebra: color-mix(
    in srgb,
    var(--color-surface-variation) 8%,
    var(--color-surface-background)
  );
  --color-table-hover: rgba(255, 255, 255, 0.025);

  /* ========== SIZES ========== */
  --size-none: 0px;
  --size-1: 1px;
  --size-2: 2px;
  --size-4: 4px;
  --size-5: 5px;
  --size-6: 6px;
  --size-8: 8px;
  --size-10: 10px;
  --size-12: 12px;
  --size-14: 14px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-32: 32px;
  --size-38: 38px;
  --size-40: 40px;
  --size-48: 48px;
  --size-52: 52px;
  --size-60: 60px;
  --size-64: 64px;
  --size-76: 76px;

  /* ========== TYPOGRAPHY ========== */
  --font-family-heading: 'Inter', system-ui, sans-serif;
  --font-family-body: 'Inter', system-ui, sans-serif;
  --font-family-technical: 'JetBrains Mono', monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-extra-wide: 0.2em;

  --font-size-body-10: 10px;
  --font-size-body-12: 12px;
  --font-size-body-14: 14px;
  --font-size-body-16: 16px;
  --font-size-body-18: 18px;

  /* Semantic aliases — system-wide sizing conventions */
  --font-size-label: 10px; /* uppercase labels: badges, tabs, menu, selects */
  --font-size-aux: 12px; /* normal case: secondary text, metadata, footnotes */

  --font-size-h1: 60px;
  --font-size-h2: 48px;
  --font-size-h3: 38px;
  --font-size-h4: 32px;
  --font-size-h5: 24px;
  --font-size-h6: 18px;

  --line-height-body-14: 14px;
  --line-height-body-18: 18px;
  --line-height-body-20: 20px;
  --line-height-h1: 64px;
  --line-height-h2: 52px;
  --line-height-h3: 40px;
  --line-height-h4: 38px;
  --line-height-h5: 32px;
  --line-height-h6: 24px;

  /* ========== BORDER RADIUS ========== */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ========== SHADOWS ========== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

  /* ========== Z-INDEX ========== */
  --z-index-base: 0;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;
  --z-index-toast: 800;

  /* ========== COMPONENT TOKENS ========== */
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --button-radius: var(--radius-md);
  --button-shadow: var(--shadow-xs);
  --button-shadow-hover: var(--shadow-md);
  --input-radius: var(--radius-md);
  --modal-radius: var(--radius-lg);
  --modal-shadow: var(--shadow-2xl);

  /* ========== ANIMATION ========== */
  --transition-fast: all 150ms ease-out;
  --transition-normal: all 300ms ease-in-out;
  --transition-slow: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --easing-cubic-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-cubic-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== LAYOUT ========== */
  --sidebar-width: 260px;
}

/* ========================================
   RESET & BASE
   ======================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-surface-background);
  color: var(--color-text-body-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: var(--color-text-link-default);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}
a:active {
  color: var(--color-text-link-active);
}

/* Material Icons Rounded */
.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   STANDARD LIGHT THEME  [data-theme="light"]
   ======================================== */

[data-theme='light'] {
  /* Status */
  --status-todo-color: #0969da;
  --status-overdue-color: #cf222e;
  --status-warning-color: #9a6700;
  --status-success-color: #1a7f37;
  --status-canceled-color: #6e7781;
  --status-unknown-color: #8250df;

  /* Surfaces — N0 a N3 */
  --color-surface-background: #ffffff; /* N0: Fondo base */
  --color-surface-headers: #f1f5f9; /* N1: Header/Footer */
  --color-surface-variation: #f1f5f9; /* N2: Zebra 1 */
  --color-surface-variation-alt: #f8fafc; /* N3: Zebra 2 */

  --color-table-hover: rgba(0, 0, 0, 0.02);
  --color-icon-hover-bg: rgba(0, 0, 0, 0.06);
  --color-id-bg: #f1f5f9;

  /* Text Containers */
  --color-text-container-default: #f0f5fd;
  --color-text-container-active: #e5eef7;
  --color-text-container-disabled: #f1f5f9;

  /* Headings */
  --color-text-heading-primary: #1e293b;
  --color-text-heading-secondary: #475569;
  --color-text-heading-tertiary: #64748b;
  --color-text-heading-disabled: #94a3b8;

  /* Body */
  --color-text-body-primary: #1e293b;
  --color-text-body-secondary: #475569;
  --color-text-body-tertiary: #64748b;
  --color-text-body-disabled: #94a3b8;

  /* Borders */
  --color-border-primary: #e2e8f0;
  --color-border-default: #e2e8f0;
  --color-border-disabled: #f1f5f9;
  --color-border-active: var(--color-blue-500);

  /* Buttons */
  --color-button-primary-default: var(--color-blue-500);
  --color-button-primary-hover: var(--color-blue-600);
  --color-button-primary-disabled: #e2e8f0;
  --color-button-primary-text: var(--color-light-100);
  --color-button-secondary-disabled: #f1f5f9;
  --color-button-tertiary-default: var(--color-blue-500);
  --color-button-tertiary-hover: var(--color-blue-600);

  /* Links */
  --color-text-link-default: var(--color-blue-500);
  --color-text-link-hover: var(--color-blue-600);

  /* Sidebar legacy (light) */
  --color-dark-500: #ffffff;
  --color-dark-600: #f1f5f9;
  --color-dark-700: #e2e8f0;
  --color-dark-variation-400: #e2e8f0;
  --color-dark-variation-500: #ffffff;
  --color-dark-variation-600: #f1f5f9;

  /* Table specific */
  --color-text-navy-primary: #304166;
  --color-table-selection-bg: #ccd3e8;
  --color-table-bg: #e6eaf5;

  /* Tooltip Glass — Light Standard */
  --color-tooltip-background: rgba(255, 255, 255, 0.85);
  --color-tooltip-text: #1e293b;
  --color-tooltip-border: rgba(30, 41, 59, 0.1);
  --color-tooltip-shadow: rgba(0, 0, 0, 0.1);
  --color-tooltip-key-bg: rgba(0, 0, 0, 0.06);
  --color-tooltip-key-border: rgba(0, 0, 0, 0.05);
  /* Zebra: las skins light ya son sutiles de forma natural */
  --color-table-zebra: var(--color-surface-variation);
}

/* Light Theme: Form control accent overrides */
[data-theme='light'] .checkbox-wrapper input[type='checkbox']:checked {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}
[data-theme='light'] .checkbox-wrapper input[type='checkbox']:checked::after {
  border-color: #ffffff;
}
[data-theme='light'] .radio-wrapper input[type='radio']:checked {
  border-color: var(--color-blue-500);
}
[data-theme='light'] .radio-wrapper input[type='radio']:checked::after {
  background-color: var(--color-blue-500);
}
[data-theme='light'] .toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-blue-500);
  border-color: var(--color-blue-500);
}
[data-theme='light'] .toggle-switch input:checked + .toggle-slider:before {
  background-color: #ffffff;
}
[data-theme='light'] .label,
[data-theme='light'] .checkbox-wrapper label,
[data-theme='light'] .radio-wrapper label,
[data-theme='light'] .toggle-wrapper label,
[data-theme='light'] .alert-title,
[data-theme='light'] .modal-title {
  color: var(--color-text-navy-primary);
}
[data-theme='light'] .modal-title {
  color: var(--color-blue-500);
}
[data-theme='light'] .table tbody tr.active {
  background-color: var(--color-table-selection-bg);
}
[data-theme='light'] .table tbody tr.active td {
  color: var(--color-text-navy-primary);
  font-weight: var(--font-weight-semibold);
}
[data-theme='light'] .table-container,
[data-theme='light'] .table thead {
  background-color: var(--color-table-bg);
}

/* ========================================
   SKINS — HCE Architecture
   ======================================== */

/* DARK: Abismo Tecnológico — Especificación Purificada */
[data-skin='abismo'] {
  --color-surface-background: #05070a; /* N0: Fondo App */
  --color-surface-headers: #0b0e14; /* N1: Header/Footer */
  --color-surface-variation: #12171f; /* N2: Zebra 1 */
  --color-surface-variation-alt: #161b22; /* N3: Zebra 2 */

  --color-border-primary: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.06);
  --color-border-active: #388bfd;

  --color-text-heading-primary: #f0f6fc; /* Blanco técnico */
  --color-text-body-primary: #f0f6fc;
  --color-text-heading-secondary: #8b949e; /* Gris azulado */
  --color-text-body-secondary: #8b949e;

  --color-id-bg: #05070a;
  --color-button-primary-default: #388bfd; /* Flow Blue */
  --color-button-primary-hover: #79c0ff;
  --color-button-tertiary-default: #388bfd;
  --color-button-tertiary-hover: rgba(56, 139, 253, 0.1);
  --color-text-link-default: #388bfd;
  --color-table-zebra: rgba(255, 255, 255, 0.015);
  --color-table-hover: rgba(255, 255, 255, 0.025);
  --color-icon-hover-bg: rgba(255, 255, 255, 0.1);

  --color-text-container-default: #0d1117;
  --color-text-container-active: #161b22;
  --color-text-container-disabled: #0a0d13;

  /* Tooltip Glass — Abismo (Azul Ártico) */
  --color-tooltip-background: rgba(11, 14, 20, 0.9);
  --color-tooltip-text: #f0f6fc;
  --color-tooltip-border: rgba(56, 139, 253, 0.25);
  --color-tooltip-shadow: rgba(0, 0, 0, 0.6);
  --color-tooltip-key-bg: rgba(255, 255, 255, 0.12);
  --color-tooltip-key-border: rgba(255, 255, 255, 0.08);
}

/* DARK: Obsidiana IA — Elevación equilibrada */
[data-skin='obsidiana'] {
  --color-surface-background: #08070b;
  --color-surface-headers: #0e0c12;
  --color-surface-variation: #121017;
  --color-surface-variation-alt: #18151f;

  --color-border-primary: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.06);
  --color-text-heading-primary: #ffffff;
  --color-text-heading-secondary: #a1a1aa;
  --color-border-active: #a855f7;
  --color-button-primary-default: #a855f7;
  --color-button-primary-hover: #c084fc;
  --color-button-tertiary-default: #a855f7;
  --color-button-tertiary-hover: rgba(168, 85, 247, 0.1);
  --color-text-link-default: #a855f7;
  --color-id-bg: #08070b;
  --color-table-zebra: rgba(255, 255, 255, 0.015);
  --color-table-hover: rgba(255, 255, 255, 0.025);
  --color-icon-hover-bg: rgba(168, 85, 247, 0.1);

  --color-text-container-default: #121017;
  --color-text-container-active: #1b1921;
  --color-text-container-disabled: #0e0c13;

  /* Tooltip Glass — Obsidiana (Púrpura Neón) */
  --color-tooltip-background: rgba(14, 12, 18, 0.9);
  --color-tooltip-text: #ffffff;
  --color-tooltip-border: rgba(168, 85, 247, 0.3);
  --color-tooltip-shadow: rgba(0, 0, 0, 0.7);
  --color-tooltip-key-bg: rgba(168, 85, 247, 0.15);
  --color-tooltip-key-border: rgba(168, 85, 247, 0.1);
}

/* LIGHT: Arena Profesional — Contraste sutil */
[data-skin='arena'] {
  --color-surface-background: #f8f9fa;
  --color-surface-headers: #e8eaed; /* Unificamos tono N1 */
  --color-surface-variation: #ffffff; /* Zebra 1 - Blanco */
  --color-surface-variation-alt: #f1f3f4; /* Zebra 2 - Humo */

  --color-border-primary: #c0c8d4;
  --color-border-default: #c0c8d4;
  --color-text-heading-primary: #202124;
  --color-text-heading-secondary: #5f6368;
  --color-border-active: #1a73e8;
  --color-button-primary-default: #1a73e8;
  --color-button-primary-hover: #1967d2;
  --color-button-tertiary-hover: rgba(26, 115, 232, 0.08);
  --color-id-bg: #f1f3f4;
  --color-table-zebra: #f1f3f4;
  --color-table-hover: rgba(0, 0, 0, 0.02);
  --color-icon-hover-bg: rgba(0, 0, 0, 0.08);

  --color-text-container-default: #ffffff;
  --color-text-container-active: #f5f7fa;
  --color-text-container-disabled: #f8f9fa;

  /* Tooltip Glass — Arena (Cristal Ámbar) */
  --color-tooltip-background: rgba(255, 255, 255, 0.7);
  --color-tooltip-text: #202124;
  --color-tooltip-border: rgba(26, 115, 232, 0.3);
  --color-tooltip-shadow: rgba(0, 0, 0, 0.15);
  --color-tooltip-key-bg: rgba(0, 0, 0, 0.08);
  --color-tooltip-key-border: rgba(0, 0, 0, 0.08);
}

/* LIGHT: Plata Minimalista — Indigo Soft */
[data-skin='plata'] {
  --color-surface-background: #e9ecef;
  --color-surface-headers: #dee2e6;
  --color-surface-variation: #f8f9fa;
  --color-surface-variation-alt: #ffffff;

  --color-border-primary: #c0c8d4;
  --color-border-default: #c0c8d4;
  --color-text-heading-primary: #212529;
  --color-text-heading-secondary: #6c757d;
  --color-border-active: #6366f1;
  --color-button-primary-default: #6366f1;
  --color-button-primary-hover: #4f46e5;
  --color-button-tertiary-hover: rgba(99, 102, 241, 0.1);
  --color-id-bg: #e9ecef;
  --color-table-zebra: #f8f9fa;
  --color-table-hover: rgba(0, 0, 0, 0.02);
  --color-icon-hover-bg: rgba(99, 102, 241, 0.1);

  --color-text-container-default: #ffffff;
  --color-text-container-active: #f0f2f5;
  --color-text-container-disabled: #f5f6f8;

  /* Tooltip Glass — Plata (Cristal Índigo) */
  --color-tooltip-background: rgba(248, 250, 252, 0.65);
  --color-tooltip-text: #212529;
  --color-tooltip-border: rgba(99, 102, 241, 0.35);
  --color-tooltip-shadow: rgba(33, 37, 41, 0.18);
  --color-tooltip-key-bg: rgba(99, 102, 241, 0.15);
  --color-tooltip-key-border: rgba(99, 102, 241, 0.1);
}

/* ========================================
   ICON BUTTON MICRO-ANIMATIONS
   (Shared animations referenced across skins)
   ======================================== */

.icon-btn-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spin-animation {
  animation: rotateSpin 1s linear infinite;
  color: var(--color-button-primary-default) !important;
}

@keyframes rotateSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.is-success .icon-btn-content {
  animation: scalePopPulse 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scalePopPulse {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========================================
   CUSTOM SCROLLBAR — System-wide
   Adapts to theme via semantic tokens
   ======================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-border-default);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-text-body-tertiary);
}

::-webkit-scrollbar-corner {
  background: transparent;
}