@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

:root {
  
  /* Font */

  --heading-font: 'Merriweather', sans-serif;
  --body-font: 'Lato', sans-serif;

  /* ── Breakpoints estándar (customizables) ── */
  --ac-breakpoint-mobile: 576px;
  --ac-breakpoint-tablet: 992px;
  --ac-breakpoint-desktop: 1440px;



  /* Escala Primary */
  --color-primary-100: #E5EBFF;
  --color-primary-200: #CCD7FF;
  --color-primary-300: #B3C3FF;
  --color-primary-400: #809BFF;
  --color-primary-500: #0071F7;
  --color-primary-600: #0C41FF;
  --color-primary-700: #002CCC;
  --color-primary-800: #002199;
  --color-primary-900: #001666;

  /* Escala Secondary */
  --color-secondary-100: #EFE5FF;
  --color-secondary-200: #E0CCFF;
  --color-secondary-300: #D0B3FF;
  --color-secondary-400: #B080FF;
  --color-secondary-500: #803EDA;
  --color-secondary-600: #680CFF;
  --color-secondary-700: #4E00CC;
  --color-secondary-800: #3B0099;
  --color-secondary-900: #270066;

  /* Escala Success */
  --color-succes-100: #DCFCE7;
  --color-succes-200: #BBF7D0;
  --color-succes-300: #86EFAC;
  --color-succes-400: #4ADE80;
  --color-succes-500: #81FF6E;
  --color-succes-600: #16A34A;
  --color-succes-700: #15803D;
  --color-succes-800: #166534;
  --color-succes-900: #14532D;

  /* Escala Neutral */
  --color-black: #141518;
  --color-black-medium: #1F2024;
  --color-black-light: #27292E;
  --color-black-stroke: #40424A;
  --color-white: #e7e7e7;
  --color-white-medium: #CECECE;
  --color-white-stroke: #40424A;
  --color-white-dark: #A4A4A4;
  --color-black-blue: #141518;
  --color-white-blue: #1F2937;

  /* White transparent */
  --color-white-10: rgba(231, 231, 231, 0.1);
  --color-white-20: rgba(231, 231, 231, 0.2);
  --color-white-30: rgba(231, 231, 231, 0.3);
  --color-white-40: rgba(231, 231, 231, 0.4);
  --color-white-50: rgba(231, 231, 231, 0.5);
  --color-white-60: rgba(231, 231, 231, 0.6);
  --color-white-70: rgba(231, 231, 231, 0.7);
  --color-white-80: rgba(231, 231, 231, 0.8);
  --color-white-90: rgba(231, 231, 231, 0.9);

  /* Black transparent */
  --color-black-10: rgba(20, 21, 24, 0.1);
  --color-black-20: rgba(20, 21, 24, 0.2);
  --color-black-30: rgba(20, 21, 24, 0.3);
  --color-black-40: rgba(20, 21, 24, 0.4);
  --color-black-50: rgba(20, 21, 24, 0.5);
  --color-black-60: rgba(20, 21, 24, 0.6);
  --color-black-70: rgba(20, 21, 24, 0.7);
  --color-black-80: rgba(20, 21, 24, 0.8);
  --color-black-90: rgba(20, 21, 24, 0.9);

  /* Primary transparent */
  --color-primary-10: rgba(12, 65, 255, 0.1);
  --color-primary-20: rgba(12, 65, 255, 0.2);
  --color-primary-30: rgba(12, 65, 255, 0.3);
  --color-primary-40: rgba(12, 65, 255, 0.4);
  --color-primary-50: rgba(12, 65, 255, 0.5);
  --color-primary-60: rgba(12, 65, 255, 0.6);
  --color-primary-70: rgba(12, 65, 255, 0.7);
  --color-primary-80: rgba(12, 65, 255, 0.8);
  --color-primary-90: rgba(12, 65, 255, 0.9);

  /* Secondary transparent */
  --color-secondary-10: rgba(104, 12, 255, 0.1);
  --color-secondary-20: rgba(104, 12, 255, 0.2);
  --color-secondary-30: rgba(104, 12, 255, 0.3);
  --color-secondary-40: rgba(104, 12, 255, 0.4);
  --color-secondary-50: rgba(104, 12, 255, 0.5);
  --color-secondary-60: rgba(104, 12, 255, 0.6);
  --color-secondary-70: rgba(104, 12, 255, 0.7);
  --color-secondary-80: rgba(104, 12, 255, 0.8);
  --color-secondary-90: rgba(104, 12, 255, 0.9);

  /* Spacing*/
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-base: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;

  /* BorderRadius */
  --border-radius-none: 0px;
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-base: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --border-radius-2xl: 48px;
  --border-radius-3xl: 64px;
  --border-radius-4xl: 80px;
  --border-radius-5xl: 96px;
  --border-radius-full: 50%;

  /* Font Size Heading */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;

/* Font size body */
  --font-size-body-xs: 12px;
  --font-size-body-sm: 14px;
  --font-size-body-base: 16px;
  --font-size-body-lg: 18px;

/* Font size heading */
  --h1: 60px;
  --h2: 48px;
  --h3: 38px;
  --h4: 30px;
  --h5: 24px;
  --h6: 20px;

/* Border */
  --border-xs: 1px;
  --border-sm: 2px;
  --border-base: 4px;
  --border-lg: 8px;
  --border-xl: 16px;

  /* Size components */
  --component-height-base: 40px;
  --component-height-small: 36px;

  /* Text area */
  --text-area-height-base: 150px;
  --text-area-height-advanced: 320px;
}

/* ========================================= */
/* Semantic Themes                           */
/* ========================================= */

/* Default / Dark Theme */
:root, [data-theme="dark"] {
  --theme-bg-body: var(--color-black);
  --theme-bg-surface: var(--color-black-light);
  --theme-bg-surface-hover: var(--color-black-medium);
  --theme-bg-surface-active: var(--color-black-stroke);
  
  --theme-text-primary: var(--color-white);
  --theme-text-secondary: var(--color-white-medium);
  --theme-text-muted: var(--color-white-dark);
  --theme-text-accent: var(--color-secondary-600); /* Forced #680CFF for Dark theme too per request */
  
  --theme-border-color: var(--color-black-stroke);
  --theme-border-color-hover: var(--color-white-stroke);
  --theme-border-color-focus: var(--color-primary-600);
}

/* Light Theme */
[data-theme="light"] {
  --theme-bg-body: #F4F6F8;
  --theme-bg-surface: #FFFFFF;
  --theme-bg-surface-hover: #F8F9FA;
  --theme-bg-surface-active: #E9ECEF;
  
  --theme-text-primary: var(--color-black-medium);
  --theme-text-secondary: var(--color-black-stroke);
  --theme-text-muted: #6C757D;
  --theme-text-accent: var(--color-secondary-600); /* #680CFF */
  
  --theme-border-color: #E4E7EB;
  --theme-border-color-hover: #CED4DA;
  --theme-border-color-focus: var(--color-primary-500);
}

/* Sidebar Layout Classes (Support for ac-side-nav-custom slotted panels) */
.profile-layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.scrollable-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 20px 0;
}

.panel-content.is-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 120px);
}

.fixed-bottom {
  flex-shrink: 0;
}

/* ===================================================
   FASE 1: AC CSS UTILITIES
   Reemplaza Bootstrap grid, flex, spacing y badges
   =================================================== */

/* ─────────────────────────────────────────────────
   AC-GRID SYSTEM (Reemplaza Bootstrap Grid)
   ───────────────────────────────────────────────── */
.ac-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-base, 16px);
}
.ac-row--gap-sm  { gap: var(--spacing-sm, 8px); }
.ac-row--gap-lg  { gap: var(--spacing-lg, 24px); }
.ac-row--no-gap  { gap: 0; }

/* Columns — mobile-first */
.ac-col      { flex: 1; min-width: 0; }
.ac-col--auto { flex: 0 0 auto; }
.ac-col--full { flex: 0 0 100%; max-width: 100%; }

.ac-col--1-2 { flex: 0 0 50%;      max-width: 50%; }
.ac-col--1-3 { flex: 0 0 33.333%; max-width: 33.333%; }
.ac-col--1-4 { flex: 0 0 25%;      max-width: 25%; }
.ac-col--2-3 { flex: 0 0 66.666%; max-width: 66.666%; }
.ac-col--3-4 { flex: 0 0 75%;      max-width: 75%; }

@media (max-width: 768px) {
  .ac-col--1-2,
  .ac-col--1-3,
  .ac-col--1-4,
  .ac-col--2-3,
  .ac-col--3-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────────────
   RESPONSIVE GRID HELPERS
   ───────────────────────────────────────────────── */

/* Tablet breakpoint grid helpers */
@media (max-width: 992px) {
  .ac-col--tablet-1-2 { flex: 0 0 50%; max-width: 50%; }
  .ac-col--tablet-1-3 { flex: 0 0 33.333%; max-width: 33.333%; }
  .ac-col--tablet-1-4 { flex: 0 0 25%; max-width: 25%; }
  .ac-col--tablet-full { flex: 0 0 100%; max-width: 100%; }
}

/* Mobile breakpoint grid helpers */
@media (max-width: 576px) {
  .ac-col--mobile-1-2 { flex: 0 0 50%; max-width: 50%; }
  .ac-col--mobile-full { flex: 0 0 100%; max-width: 100%; }
}

/* ─────────────────────────────────────────────────
   FLEX UTILITIES
   ───────────────────────────────────────────────── */
.ac-flex               { display: flex; }
.ac-flex--col          { flex-direction: column; }
.ac-flex--wrap         { flex-wrap: wrap; }
.ac-flex--center       { align-items: center; justify-content: center; }
.ac-flex--between      { justify-content: space-between; }
.ac-flex--align-center { align-items: center; }
.ac-flex--align-start  { align-items: flex-start; }
.ac-flex--align-end    { align-items: flex-end; }

/* Gap helpers */
.ac-gap-xs   { gap: var(--spacing-xs,   4px); }
.ac-gap-sm   { gap: var(--spacing-sm,   8px); }
.ac-gap-base { gap: var(--spacing-base, 16px); }
.ac-gap-lg   { gap: var(--spacing-lg,  24px); }

/* ─────────────────────────────────────────────────
   SPACING UTILITIES
   ───────────────────────────────────────────────── */
/* Margin top */
.ac-mt-xs   { margin-top: var(--spacing-xs,   4px); }
.ac-mt-sm   { margin-top: var(--spacing-sm,   8px); }
.ac-mt-base { margin-top: var(--spacing-base, 16px); }
.ac-mt-lg   { margin-top: var(--spacing-lg,  24px); }

/* Margin bottom */
.ac-mb-xs   { margin-bottom: var(--spacing-xs,   4px); }
.ac-mb-sm   { margin-bottom: var(--spacing-sm,   8px); }
.ac-mb-base { margin-bottom: var(--spacing-base, 16px); }
.ac-mb-lg   { margin-bottom: var(--spacing-lg,  24px); }

/* Padding */
.ac-p-xs   { padding: var(--spacing-xs,   4px); }
.ac-p-sm   { padding: var(--spacing-sm,   8px); }
.ac-p-base { padding: var(--spacing-base, 16px); }
.ac-p-lg   { padding: var(--spacing-lg,  24px); }

/* ─────────────────────────────────────────────────
   BADGE / STATUS UTILITIES
   ───────────────────────────────────────────────── */
.ac-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  font-family: var(--body-font, 'Lato', sans-serif);
  line-height: 1.4;
  white-space: nowrap;
}
.ac-badge--success {
  background-color: rgba(74, 222, 128, 0.15);
  color: #4ADE80;
}
.ac-badge--danger {
  background-color: rgba(248, 113, 113, 0.15);
  color: #F87171;
}
.ac-badge--warning {
  background-color: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
}
.ac-badge--info {
  background-color: rgba(0, 113, 247, 0.15);
  color: var(--color-primary-500, #0071F7);
}
.ac-badge--neutral {
  background-color: var(--theme-bg-surface-active);
  color: var(--theme-text-muted);
}

/* ─────────────────────────────────────────────────
   AC-SURFACE (Reemplaza .ol-card / Bootstrap card)
   ───────────────────────────────────────────────── */
.ac-surface {
  background-color: var(--theme-bg-surface);
  border: 1px solid var(--theme-border-color);
  border-radius: var(--border-radius-sm, 8px);
}
.ac-surface-body { padding: var(--spacing-base, 16px); }


/* ===================================================
   AC-TABLE — Estilos globales (Light DOM sloteado)
   Estos selectores son necesarios porque el contenido
   de los slots vive fuera del Shadow DOM del componente.
   =================================================== */

ac-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body-font, 'Lato', sans-serif);
  font-size: var(--ac-table-row-size, 14px);
  color: var(--ac-table-row-text, var(--theme-text-primary));
}
ac-table thead tr {
  background-color: var(--ac-table-header-bg, var(--theme-bg-surface-active));
}
ac-table th {
  padding: var(--ac-table-header-padding, 12px 16px);
  font-size: var(--ac-table-header-size, 14px);
  font-weight: var(--ac-table-header-weight, 600);
  color: var(--ac-table-header-text, var(--theme-text-secondary));
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--ac-table-border, var(--theme-border-color));
}
ac-table td {
  padding: var(--ac-table-row-padding, 12px 16px);
  color: var(--ac-table-row-text, var(--theme-text-primary));
  border-bottom: 1px solid var(--ac-table-row-border, var(--theme-border-color));
  vertical-align: middle;
  min-height: var(--ac-table-row-height, 56px);
}
ac-table tbody tr:hover {
  background-color: var(--ac-table-row-bg-hover, var(--theme-bg-surface-hover));
  transition: background-color 0.15s ease;
}
ac-table[striped] tbody tr:nth-child(even) {
  background-color: var(--ac-table-row-bg-striped, var(--theme-bg-body));
}
ac-table[compact] th,
ac-table[compact] td {
  padding: 8px 12px;
}

/* Pagination info text */
.ac-table-info {
  font-family: var(--body-font, 'Lato', sans-serif);
  font-size: var(--font-size-sm, 14px);
  color: var(--theme-text-muted);
  margin: 0;
}

/* Print utilities  */
@media print {
  .print-d-none { display: none !important; }
}

/* ─────────────────────────────────────────────────
   AC-TABLE — Actions column alignment
   Use class="actions" on <th> and <td> for right-
   aligned action controls in the last column.
   ───────────────────────────────────────────────── */
ac-table th.actions,
ac-table td.actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;          /* shrink column to content */
}

/* ─────────────────────────────────────────────────
   Custom Scrollbar — themed to match components
   ───────────────────────────────────────────────── */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-border-color) transparent;
}

/* ─────────────────────────────────────────────────
   RESPONSIVE UTILITIES (Desktop, Tablet, Mobile)
   ───────────────────────────────────────────────── */

/* Desktop: > 992px (default) */
@media (min-width: 993px) {
  .ac-show-desktop { display: block !important; }
  .ac-show-tablet { display: none !important; }
  .ac-show-mobile { display: none !important; }
  .ac-hide-desktop { display: none !important; }
}

/* Tablet: 576px - 992px */
@media (min-width: 576px) and (max-width: 992px) {
  .ac-show-desktop { display: none !important; }
  .ac-show-tablet { display: block !important; }
  .ac-show-mobile { display: none !important; }
  .ac-hide-tablet { display: none !important; }
}

/* Mobile: < 576px */
@media (max-width: 575px) {
  .ac-show-desktop { display: none !important; }
  .ac-show-tablet { display: none !important; }
  .ac-show-mobile { display: block !important; }
  .ac-hide-mobile { display: none !important; }
}

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-border-color);
  border-radius: 99px;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-border-color-hover);
}

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

/* Component Tokens */

/**
 * ac-action-menu — CSS Custom Property Tokens
 */

:root {
  /* Trigger button */
  --ac-action-menu-trigger-size:   32px;
  --ac-action-menu-trigger-radius: var(--border-radius-xs, 4px);
  --ac-action-menu-trigger-color:  var(--theme-text-muted);
  --ac-action-menu-trigger-bg:     transparent;
  --ac-action-menu-trigger-bg-hover:  var(--theme-bg-surface-active);
  --ac-action-menu-trigger-bg-active: var(--theme-bg-surface-hover);

  /* Panel */
  --ac-action-menu-panel-bg:      var(--theme-bg-surface);
  --ac-action-menu-panel-border:  var(--theme-border-color);
  --ac-action-menu-panel-radius:  var(--border-radius-sm, 8px);
  --ac-action-menu-panel-shadow:  0 4px 20px rgba(0, 0, 0, 0.18);
  --ac-action-menu-panel-min-width: 160px;

  /* Items */
  --ac-action-menu-item-padding:  10px 14px;
  --ac-action-menu-item-size:     var(--font-size-sm, 14px);
  --ac-action-menu-item-color:    var(--theme-text-primary);
  --ac-action-menu-item-bg-hover: var(--theme-bg-surface-hover);
  --ac-action-menu-item-color-danger: #F87171;
  --ac-action-menu-item-bg-danger: rgba(248, 113, 113, 0.08);
}


/**
 * ac-app-layout — CSS Custom Property Tokens
 */

:root {
  /* Layout dimensions */
  --ac-layout-header-height:     72px;
  --ac-layout-sidebar-width:     64px;   /* width of the icon rail (ac-side-menu) */
  --ac-layout-sidebar-gap:       8px;    /* gap between sidebar and main content */
  --ac-layout-content-padding:   24px;   /* default padding inside the content area */

  /* Colors */
  --ac-layout-bg:                var(--theme-bg-body);
  --ac-layout-sidebar-bg:        var(--theme-bg-surface);
  --ac-layout-sidebar-border:    var(--theme-border-color);

  /* Side menu z-index — must be above content, below modals */
  --ac-layout-sidebar-z:         100;
  --ac-layout-header-z:          200;
}


/* ac-article-card tokens */

:root, [data-theme="dark"] {
  --ac-article-card-bg: var(--color-black-light);
  --ac-article-card-border-color: var(--color-black-stroke);
  --ac-article-card-radius: var(--border-radius-base, 16px);

  --ac-article-card-category-color: var(--color-primary-300);
  --ac-article-card-category-size: var(--font-size-xs, 12px);

  --ac-article-card-date-color: var(--color-white-medium);
  --ac-article-card-date-size: var(--font-size-xs, 12px);

  --ac-article-card-title-color: var(--color-white);
  --ac-article-card-title-size: var(--h5, 24px);
  --ac-article-card-title-font: var(--heading-font, serif);

  --ac-article-card-tag-bg: var(--color-primary-300);
  --ac-article-card-tag-color: var(--color-primary-900);
  --ac-article-card-tag-size: var(--font-size-xs, 12px);
  --ac-article-card-tag-radius: var(--border-radius-xs, 4px);

  --ac-article-card-cta-color: var(--color-primary-400);
  --ac-article-card-cta-size: var(--font-size-sm, 14px);

  --ac-article-card-cover-width: 220px;
}

[data-theme="light"] {
  --ac-article-card-bg: var(--theme-bg-surface);
  --ac-article-card-border-color: var(--theme-border-color);
  --ac-article-card-category-color: var(--color-primary-600);
  --ac-article-card-date-color: var(--theme-text-muted);
  --ac-article-card-title-color: var(--theme-text-primary);
  --ac-article-card-tag-bg: var(--color-primary-100);
  --ac-article-card-tag-color: var(--color-primary-800);
  --ac-article-card-cta-color: var(--color-primary-600);
}


/* Components*/

:root {
  /* Color tokens*/
  --color-primary: var(--color-primary-600);
  --color-primary-light: var(--color-primary-500);
  --color-acent: var(--color-secondary-600);
  --color-acent-light: var(--color-secondary-500);

  /* Dimensiones Generales */
  --button-height-base: var(--component-height-base);
  --button-height-small: var(--component-height-small);
  --button-rounded: var(--border-radius-sm);

  /* Estados y Colores Globales de Botón */
  --button-text-color: var(--theme-text-primary);
  --button-color-disable: var(--theme-bg-surface-active);
  --button-text-color-disable: var(--theme-text-muted);

  /* Botón Primario */
  --primary-button-primary-background: var(--colors-surface-primary);
  --primary-button-primary-background-outline: var(--colors-surface-primary-light);
  --primary-button-primary-background-hover: var(--color-primary-500);
  --primary-button-primary-color-outline-hover: var(--color-primary-400);
  /* Focus ring specifically for primary buttons (accent color) */
  --primary-button-focus-ring: var(--color-acent, var(--color-secondary-600, #680CFF));

  /* Botón Secundario */
  --secondary-button-secondary-background-hover: var(--theme-bg-surface-hover);
  --secondary-button-secondary-border-hover: var(--theme-border-color);

  /* Botón Terciario */
  --tertiary-button-tertiary-background: var(--theme-bg-surface);
  --tertiary-button-tertiary-border: var(--theme-border-color);
  --tertiary-button-tertiary-background-hover: var(--theme-bg-surface-hover);
  --tertiary-button-tertiary-border-hover: var(--theme-border-color-hover);
  --focus-ring-color: rgba(12, 65, 255, 0.9);

/* =========================================
     Variante: Nav
    =========================================*/
   --ac-btn-nav-bg-normal: var(--ac-btn-nav-bg-normal, transparent);
   --ac-btn-nav-text-normal: var(--ac-btn-nav-text-normal, var(--theme-text-muted));

   --ac-btn-nav-bg-hover: var(--color-primary-20);
   --ac-btn-nav-text-hover: var(--color-primary-600);

   --ac-btn-nav-bg-active: transparent;
   --ac-btn-nav-text-active: var(--color-primary);

   --ac-btn-nav-bg-disabled: var(--ac-btn-nav-bg-disabled, transparent);
   --ac-btn-nav-text-disabled: var(--ac-btn-nav-text-disabled, var(--theme-text-muted));

   --ac-btn-nav-indicator-active: var(--ac-btn-nav-indicator-active, var(--color-primary-500));

/* =========================================
     Variante: Side Menu (Single Style)
     ========================================= */
  --ac-btn-side-menu-padding: var(--spacing-sm, 8px);
  --ac-btn-side-menu-gap: var(--spacing-sm, 8px);
  --ac-btn-side-menu-radius: var(--border-radius-sm, 8px);

  /* Side Menu Styles (Always Primary logic) */
  --ac-btn-side-menu-bg: transparent;
  --ac-btn-side-menu-text: var(--theme-text-primary);

  --ac-btn-side-menu-bg-active: var(--color-primary-500, #0071F7);
  --ac-btn-side-menu-border-active: 1px solid var(--color-primary-400, #809BFF);
  --ac-btn-side-menu-text-active: var(--color-white);

  --ac-btn-side-menu-bg-hover: var(--theme-bg-surface-active);

  /* Title */
  --ac-btn-side-menu-title-color: var(--color-primary-300);

  /* Responsive: Tablet */
  --button-height-base-tablet: 38px;
  --button-height-small-tablet: 34px;
  --button-padding-x-tablet: 18px;
  --button-font-size-tablet: 14px;

  /* Responsive: Mobile */
  --button-height-base-mobile: 40px;
  --button-height-small-mobile: 36px;
  --button-padding-x-mobile: 16px;
  --button-font-size-mobile: 14px;
}

[data-theme="light"] {
  --ac-btn-side-menu-title-color: var(--color-primary-600);
}

/* ac-card tokens */

:root {
  --ac-card-bg: var(--theme-bg-surface);
  --ac-card-border-color: var(--theme-border-color);
  --ac-card-border-width: var(--border-xs);
  --ac-card-radius: var(--border-radius-sm);
  --ac-card-padding: var(--spacing-base);

  --ac-card-title-font: var(--heading-font);
  --ac-card-title-size: var(--h6);
  --ac-card-title-color: var(--theme-text-primary);
  --ac-card-title-weight: bold;

  --ac-card-icon-color: var(--theme-text-secondary);
  --ac-card-arrow-color: var(--theme-text-secondary);

  /* Responsive: Tablet */
  --ac-card-padding-tablet: 20px;
  --ac-card-title-size-tablet: 18px;

  /* Responsive: Mobile */
  --ac-card-padding-mobile: 16px;
  --ac-card-title-size-mobile: 16px;
}


/**
 * Tokens for ac-card-dashboard
 * Include this CSS file if you want to override default variables per component.
 */

 :root{
  --card-dashboard-bg: var(--theme-bg-body);
  --card-dashboard-border: var(--theme-border-color);
  --card-dashboard-radius: var(--border-radius-base);
  --card-dashboard-padding: var(--spacing-lg);
  --card-dashboard-gap: var(--spacing-base);
  --card-dashboard-icon-bg: rgba(0, 113, 247, 0.15);
  --card-dashboard-icon-color: var(--color-primary-600);

  /* Responsive: Tablet */
  --card-dashboard-padding-tablet: 16px;
  --card-dashboard-icon-size-tablet: 36px;
  --card-dashboard-value-size-tablet: 24px;
  --card-dashboard-title-size-tablet: 14px;
  --card-dashboard-description-size-tablet: 13px;

  /* Responsive: Mobile */
  --card-dashboard-padding-mobile: 12px;
  --card-dashboard-gap-mobile: 8px;
  --card-dashboard-icon-size-mobile: 28px;
  --card-dashboard-value-size-mobile: 20px;
  --card-dashboard-title-size-mobile: 12px;
  --card-dashboard-description-size-mobile: 11px;
  --card-dashboard-trend-size-mobile: 11px;
}
/*
  --card-dashboard-bg: #1F2024;
  --card-dashboard-radius: 16px;
  --card-dashboard-padding: 24px;
  --card-dashboard-gap: 16px;
  --card-dashboard-icon-bg: rgba(0, 113, 247, 0.15);
  --card-dashboard-icon-color: #0071F7;
*/


/* ─────────────────────────────────────────────────
   ac-card-message — CSS Token Defaults
   ───────────────────────────────────────────────── */
:root {
  --ac-msg-radius:         12px;
  --ac-msg-padding:        12px 14px;
  --ac-msg-avatar-size:    44px;
  --ac-msg-gap:            12px;

  /* Colors — inherit from theme by default */
  --ac-msg-bg:             var(--theme-bg-surface);
  --ac-msg-bg-hover:       var(--theme-bg-surface-hover);
  --ac-msg-bg-active:      var(--color-primary-500, #0071F7);
  --ac-msg-name-color:     var(--theme-text-primary);
  --ac-msg-text-color:     var(--theme-text-muted);
  --ac-msg-time-color:     var(--theme-text-muted);
  --ac-msg-dot-color:      var(--color-primary-500, #0071F7);
  --ac-msg-dot-size:       9px;
}


/* ac-continue-card tokens */

:root, [data-theme="dark"] {
  --ac-continue-card-bg: var(--color-black-light);
  --ac-continue-card-border-color: var(--color-black-stroke);
  --ac-continue-card-radius: var(--border-radius-base, 16px);

  --ac-continue-card-title-color: var(--color-white);
  --ac-continue-card-title-size: var(--h5, 24px);
  --ac-continue-card-title-font: var(--heading-font, serif);

  --ac-continue-card-subtitle-color: var(--color-white-medium);
  --ac-continue-card-subtitle-size: var(--font-size-sm, 14px);

  --ac-continue-card-lesson-color: var(--color-white);
  --ac-continue-card-lesson-size: var(--font-size-sm, 14px);

  --ac-continue-card-cta-color: var(--color-primary-400);
  --ac-continue-card-cta-size: var(--font-size-sm, 14px);

  --ac-continue-card-cover-width: 220px;
}

[data-theme="light"] {
  --ac-continue-card-bg: var(--theme-bg-surface);
  --ac-continue-card-border-color: var(--theme-border-color);
  --ac-continue-card-title-color: var(--theme-text-primary);
  --ac-continue-card-subtitle-color: var(--theme-text-secondary);
  --ac-continue-card-lesson-color: var(--theme-text-primary);
  --ac-continue-card-cta-color: var(--color-primary-600);
}


:host {
  --ac-counter-tag-padding: var(--spacing-xs, 4px);
  --ac-counter-tag-border-radius: var(--border-radius-xs, 4px);
  --ac-counter-tag-font-size: var(--font-size-xs, 12px);
  --ac-counter-tag-font-family: var(--body-font, 'Lato', sans-serif);
  --ac-counter-tag-color: var(--theme-text-primary);
}

.ac-counter-tag--black-medium {
  --ac-counter-tag-bg: var(--theme-bg-surface-hover);
}

.ac-counter-tag--black-stroke {
  --ac-counter-tag-bg: var(--theme-bg-surface-active);
}


/* ─────────────────────────────────────────────────
   ac-coupon-card — CSS Token Defaults
   ───────────────────────────────────────────────── */
:root {
  --ac-coupon-width:       250px;
  --ac-coupon-height:      112px;
  --ac-coupon-radius:      8px;
  --ac-coupon-right-width: 68px;
  --ac-coupon-notch-size:  14px;
}


/* ac-course-card tokens */

:root, [data-theme="dark"] {
  --ac-course-card-bg: var(--color-black-light);
  --ac-course-card-border-color: var(--color-black-stroke);
  --ac-course-card-border-width: 1px;
  --ac-course-card-radius: var(--border-radius-base, 16px);
  --ac-course-card-padding: var(--spacing-base, 16px);
  
  --ac-course-card-title-color: var(--color-primary-300);
  --ac-course-card-title-size: 16px;
  --ac-course-card-title-font: var(--heading-font, serif);

  --ac-course-card-price-color: var(--color-white);
  --ac-course-card-price-size: 18px;

  --ac-course-card-desc-color: var(--color-white);
  --ac-course-card-desc-size: var(--font-size-body-sm, 14px);

  --ac-course-card-author-color: var(--color-white);

  --ac-course-card-star-full-color: #FBBF24;
  --ac-course-card-star-half-color: #FBBF24;
  --ac-course-card-star-empty-color: #4B5563;
  --ac-course-card-rating-value-color: var(--color-white);
  --ac-course-card-rating-count-color: var(--theme-text-secondary, #9CA3AF);
}

[data-theme="light"] {
  --ac-course-card-bg: var(--theme-bg-surface);
  --ac-course-card-border-color: var(--theme-border-color);
  
  --ac-course-card-title-color: var(--color-primary-600);
  --ac-course-card-price-color: var(--theme-text-primary);
  --ac-course-card-desc-color: var(--theme-text-secondary);
  --ac-course-card-author-color: var(--theme-text-primary);

  --ac-course-card-star-empty-color: #D1D5DB;
  --ac-course-card-rating-value-color: var(--theme-text-primary);
  --ac-course-card-rating-count-color: var(--theme-text-secondary);
}


/* ac-course-tag tokens */

:root, [data-theme="dark"] {
  --ac-course-tag-bg: var(--color-primary-300);
  --ac-course-tag-text-color: var(--color-primary-900);
  
  --ac-course-tag-radius: var(--border-radius-sm, 8px);
  --ac-course-tag-padding: 8px 12px;
  --ac-course-tag-font-size: var(--font-size-sm, 14px);
  --ac-course-tag-icon-size: 16px;
  --ac-course-tag-gap: 8px;
}

[data-theme="light"] {
  --ac-course-tag-bg: var(--color-primary-100);
  --ac-course-tag-text-color: var(--color-primary-800);
}


:root {
  /* Sizes */
  --ac-dropdown-padding: var(--ac-input-padding, 0 16px);
  --ac-dropdown-height: var(--ac-input-height-base, 40px);
  --ac-dropdown-radius: var(--ac-input-border-radius, 8px);
  --ac-dropdown-font-size: var(--ac-input-font-size, 14px);
  
  /* Trigger button / Input match */
  --ac-dropdown-bg: var(--ac-input-bg-color, var(--theme-bg-surface));
  --ac-dropdown-border: 1px solid var(--ac-input-border-color, var(--theme-border-color));
  --ac-dropdown-text: var(--ac-input-text-color, var(--theme-text-primary));

  --ac-dropdown-bg-hover: var(--theme-bg-surface-hover);
  --ac-dropdown-border-focus: var(--theme-border-color-focus);
  
  /* Popover */
  --ac-dropdown-popover-bg: var(--theme-bg-surface);
  --ac-dropdown-popover-border: 1px solid var(--theme-border-color);
  --ac-dropdown-popover-radius: 8px;
  --ac-dropdown-popover-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  
  /* Items */
  --ac-dropdown-item-padding: 10px 16px;
  --ac-dropdown-item-bg-hover: var(--theme-bg-surface-hover);
  --ac-dropdown-item-text: var(--theme-text-primary);
  --ac-dropdown-item-text-active: var(--color-primary-500);
  
  /* Search input */
  --ac-dropdown-search-border: 1px solid var(--theme-border-color);
  --ac-dropdown-search-bg: var(--theme-bg-surface-hover);
  --ac-dropdown-search-text: var(--theme-text-primary);
  --ac-dropdown-search-placeholder: var(--theme-text-muted);

  /* Responsive: Tablet */
  --ac-dropdown-height-tablet: 38px;
  --ac-dropdown-padding-tablet: 8px 14px;
  --ac-dropdown-font-size-tablet: 14px;
  --ac-dropdown-font-size-title-tablet: 13px;
  --ac-dropdown-popover-max-height-tablet: 220px;

  /* Responsive: Mobile */
  --ac-dropdown-height-mobile: 40px;
  --ac-dropdown-padding-mobile: 8px 12px;
  --ac-dropdown-font-size-mobile: 14px;
  --ac-dropdown-font-size-title-mobile: 13px;
  --ac-dropdown-helper-font-size-mobile: 11px;
  --ac-dropdown-popover-max-height-mobile: 200px;
  --ac-dropdown-chip-max-width-mobile: 120px;
}


/**
 * ac-filter-button — CSS Custom Property Tokens
 */

:root {
  /* ── Base pill button ─────────────────────────────── */
  --ac-filter-btn-height:          36px;
  --ac-filter-btn-height-sm:       28px;
  --ac-filter-btn-padding:         0 16px;
  --ac-filter-btn-padding-sm:      0 12px;
  --ac-filter-btn-gap:             6px;
  --ac-filter-btn-radius:          999px;       /* fully rounded pill */
  --ac-filter-btn-font-size:       var(--font-size-sm, 14px);
  --ac-filter-btn-font-size-sm:    var(--font-size-xs, 12px);
  --ac-filter-btn-font-weight:     500;

  /* Default (inactive) colors */
  --ac-filter-btn-bg:              var(--theme-bg-surface);
  --ac-filter-btn-border:          var(--theme-border-color);
  --ac-filter-btn-color:           var(--theme-text-secondary);
  --ac-filter-btn-bg-hover:        var(--theme-bg-surface-hover);

  /* Active (selection applied) colors */
  --ac-filter-btn-active-bg:       var(--theme-accent, #6366f1);
  --ac-filter-btn-active-border:   var(--theme-accent, #6366f1);
  --ac-filter-btn-active-color:    #ffffff;
  --ac-filter-btn-active-bg-hover: color-mix(in srgb, var(--theme-accent, #6366f1) 88%, black);

  /* Counter badge */
  --ac-filter-btn-count-bg:        rgba(255, 255, 255, 0.28);
  --ac-filter-btn-count-color:     #ffffff;
  --ac-filter-btn-count-radius:    999px;

  /* ── Dropdown panel ───────────────────────────────── */
  --ac-filter-panel-bg:            var(--theme-bg-surface);
  --ac-filter-panel-border:        var(--theme-border-color);
  --ac-filter-panel-radius:        10px;
  --ac-filter-panel-shadow:        0 8px 24px rgba(0, 0, 0, 0.16);
  --ac-filter-panel-min-width:     220px;

  /* Search input inside panel */
  --ac-filter-search-bg:           var(--theme-bg-surface-active);
  --ac-filter-search-border:       var(--theme-border-color);
  --ac-filter-search-radius:       6px;
  --ac-filter-search-color:        var(--theme-text-primary);

  /* Option items */
  --ac-filter-option-color:        var(--theme-text-primary);
  --ac-filter-option-bg-hover:     var(--theme-bg-surface-hover);
  --ac-filter-option-size:         var(--font-size-sm, 14px);

  /* Checkbox */
  --ac-filter-check-border:        var(--theme-border-color);
  --ac-filter-check-bg:            var(--theme-accent, #6366f1);
}


/* Header */

:root {
  --header-height: 72px;
  --header-padding-x: var(--spacing-xl, 32px);
  --header-padding-y: 0;
  --header-bg: var(--theme-bg-body);
  --header-border-color: var(--theme-border-color);
  
  --header-logo-margin-right: var(--spacing-3xl, 48px);
  --header-nav-gap: var(--spacing-xl, 32px);
  --header-actions-gap: var(--spacing-lg, 24px);
  
  --header-profile-size: 32px;
}


:root {
  /* Common guidelines */
  --ac-icon-button-padding: var(--spacing-sm, 8px);
  --ac-icon-button-radius: var(--border-radius-sm, 8px);
  --ac-icon-button-size: 40px;
  --ac-icon-button-transition: all 0.2s ease;

  /* Primary Variant: 
     Normal: Transparent
     Active: Azul (primary-500), 1px Primary-Light (primary-400) border
  */
  --ac-icon-button-primary-bg: transparent;
  --ac-icon-button-primary-border: 1px solid transparent;
  --ac-icon-button-primary-color: var(--theme-text-secondary);
  
  --ac-icon-button-primary-bg-active: var(--color-primary-500, #0071F7);
  --ac-icon-button-primary-border-active: 1px solid var(--color-primary-400, #809BFF);
  --ac-icon-button-primary-color-active: var(--color-white);
  
  --ac-icon-button-primary-bg-hover: var(--color-primary-10, rgba(12, 65, 255, 0.1));

  /* Secondary Variant:
     Normal: Transparent
     Active: black-light (#27292E), black-stroke border (#40424A)
  */
  --ac-icon-button-secondary-bg: transparent;
  --ac-icon-button-secondary-border: 1px solid transparent;
  --ac-icon-button-secondary-color: var(--theme-text-secondary);
  
  --ac-icon-button-secondary-bg-active: var(--theme-bg-surface);
  --ac-icon-button-secondary-border-active: 1px solid var(--theme-border-color);
  --ac-icon-button-secondary-color-active: var(--theme-text-primary);
  
  --ac-icon-button-secondary-bg-hover: var(--theme-bg-surface-hover);

  /* Responsive: Tablet */
  --ac-icon-button-size-tablet: 36px;
  --ac-icon-button-padding-tablet: 6px;
  --ac-icon-button-icon-size-tablet: 1.3rem;

  /* Responsive: Mobile */
  --ac-icon-button-size-mobile: 36px;
  --ac-icon-button-padding-mobile: 6px;
  --ac-icon-button-icon-size-mobile: 1.2rem;
}


:root {
  /* Input Container & Typography */
  --ac-input-gap: var(--spacing-xs, 4px);
  --ac-input-font-family: var(--body-font, 'Lato', sans-serif);
  --ac-input-font-size: var(--font-size-sm, 14px);

  /* Label */
  --ac-input-label-color: var(--theme-text-primary);
  --ac-input-label-font-weight: 600;

  /* Helper Text */
  --ac-input-helper-color: var(--theme-text-secondary);
  --ac-input-helper-font-size: var(--font-size-xs, 12px);

  /* Required Asterisk */
  --ac-input-required-color: var(--theme-text-primary);

  /* Input Field */
  --ac-input-bg: var(--theme-bg-surface-hover);
  --ac-input-text-color: var(--theme-text-primary);
  --ac-input-border-color: var(--theme-border-color);
  --ac-input-border-radius: var(--border-radius-sm, 8px);
  --ac-input-height: var(--component-height-base, 40px);
  --ac-input-padding-x: var(--spacing-base, 16px);

  /* States */
  --ac-input-bg-hover: var(--theme-bg-surface-hover);
  --ac-input-border-hover: var(--theme-border-color-hover);

  --ac-input-bg-focus: var(--theme-bg-surface-hover);
  --ac-input-border-focus: var(--color-primary-500, #0C41FF);

  --ac-input-bg-disabled: var(--theme-bg-surface);
  --ac-input-text-disabled: var(--theme-text-muted);
  --ac-input-border-disabled: var(--theme-border-color);

  --ac-input-placeholder-color: var(--theme-text-muted);

  /* Icon */
  --ac-input-icon-color: var(--theme-text-muted);
  --ac-input-icon-size: var(--icon-size-base, 20px);
  --ac-input-icon-padding-left: 44px; /* Space for the icon on the left */

  /* Calendar Icon */
  --ac-input-calendar-icon-color: var(--theme-text-secondary);
  --ac-input-calendar-icon-padding-right: 44px;

  /* Textarea */
  --ac-input-textarea-min-height: 80px;

  /* Markdown Toolbar */
  --ac-input-toolbar-bg: var(--theme-bg-surface-active);
  --ac-input-toolbar-border: var(--theme-border-color);
  --ac-input-toolbar-icon-color: var(--theme-text-secondary);
  --ac-input-toolbar-icon-hover-bg: var(--theme-bg-surface-hover);
  --ac-input-toolbar-icon-hover-color: var(--theme-text-primary);

  /* Responsive: Tablet */
  --ac-input-padding-x-tablet: 14px;
  --ac-input-padding-y-tablet: 10px;
  --ac-input-font-size-tablet: 14px;
  --ac-input-icon-padding-left-tablet: 40px;
  --ac-input-font-size-title-tablet: 13px;

  /* Responsive: Mobile */
  --ac-input-padding-x-mobile: 12px;
  --ac-input-padding-y-mobile: 10px;
  --ac-input-font-size-mobile: 14px;
  --ac-input-icon-padding-left-mobile: 38px;
  --ac-input-icon-size-mobile: 18px;
  --ac-input-font-size-title-mobile: 13px;
  --ac-input-helper-font-size-mobile: 11px;
}


:root {
  /* Overlay */
  --ac-modal-overlay-bg: var(--color-black-50, rgba(0, 0, 0, 0.5));
  
  /* Modal Surface */
  --ac-modal-bg: var(--theme-bg-surface);
  --ac-modal-radius: 12px;
  --ac-modal-padding: 16px;
  
  /* Dimensions & Spacing */
  --ac-modal-center-max-width: 500px;    /* md (default) */
  --ac-modal-center-max-width-sm: 360px; /* sm */
  --ac-modal-center-max-width-lg: 800px; /* lg */
  --ac-modal-right-max-width: 450px;
  --ac-modal-menu-max-width: 320px;
  --ac-modal-menu-top-offset: 56px;
  
  /* Text */
  --ac-modal-title-color: var(--theme-text-primary);
  --ac-modal-title-size: 18px;
  --ac-modal-close-icon-color: var(--theme-text-secondary);
  --ac-modal-close-icon-hover: var(--theme-text-primary);

  /* Body Overflow - default: scroll if content overflows */
  --ac-modal-body-overflow-y: auto;
  --ac-modal-body-overflow-x: hidden;
  
  /* Set to 'visible' if you have dropdowns/popovers that need to overflow */
  /* --ac-modal-body-overflow-y: visible; */

  /* Responsive: Tablet */
  --ac-modal-padding-tablet: 14px;
  --ac-modal-center-max-width-tablet: 90%;
  --ac-modal-center-max-width-lg-tablet: 90%;
  --ac-modal-right-max-width-tablet: 400px;

  /* Responsive: Mobile */
  --ac-modal-padding-mobile: 12px;
  --ac-modal-radius-mobile: 16px;
  --ac-modal-right-max-width-mobile: 100%;
  --ac-modal-title-size-mobile: 18px;
}


:root {
  --ac-photo-size: 38px;
  --ac-photo-radius: var(--border-radius-full, 50%);
  --ac-photo-border-width: 2px;
  --ac-photo-border-color-active: var(--color-primary-500, #0071F7);
  --ac-photo-transition: all 0.2s ease;
}


/* Section Header */

:root{
  --section-header-padding: var(--spacing-base);
  --section-header-gap: var(--spacing-base);
  --section-header-title-font: var(--heading-font);
  --section-header-title-color: var(--theme-text-primary);
  --section-header-description-font: var(--body-font);
  --section-header-description-color: var(--theme-text-muted);
}


/* Select Button Tokens */
:root, [data-theme="dark"] {
  --ac-select-btn-height: 40px;
  --ac-select-btn-height-small: 36px;
  --ac-select-btn-padding-x: 24px;
  --ac-select-btn-radius: 8px;
  --ac-select-btn-border-width: 1px;

  /* Inactive */
  --ac-select-btn-bg: transparent;
  --ac-select-btn-border-color: var(--theme-border-color); /* #40424A */
  --ac-select-btn-text: var(--theme-text-primary);

  /* Hover */
  --ac-select-btn-bg-hover: var(--theme-bg-surface-hover);
  --ac-select-btn-border-hover: var(--color-white-dark);

  /* Active */
  --ac-select-btn-bg-active: var(--theme-text-accent); 
  --ac-select-btn-border-active: var(--color-primary-400); 
  --ac-select-btn-text-active: #FFFFFF;

  /* Responsive: Tablet */
  --ac-select-btn-height-tablet: 38px;
  --ac-select-btn-height-small-tablet: 34px;
  --ac-select-btn-padding-x-tablet: 18px;
  --ac-select-btn-font-size-tablet: 13px;

  /* Responsive: Mobile */
  --ac-select-btn-height-mobile: 40px;
  --ac-select-btn-height-small-mobile: 36px;
  --ac-select-btn-padding-x-mobile: 14px;
  --ac-select-btn-font-size-mobile: 14px;
  --ac-select-btn-font-size-small-mobile: 13px;
}

[data-theme="light"] {
  /* Inactive */
  --ac-select-btn-bg: transparent;
  --ac-select-btn-border-color: var(--theme-border-color); /* #E4E7EB */
  --ac-select-btn-text: var(--theme-text-primary);

  /* Hover */
  --ac-select-btn-bg-hover: var(--theme-bg-surface-hover);
  --ac-select-btn-border-hover: var(--theme-border-color-hover);

  /* Active */
  --ac-select-btn-bg-active: var(--theme-text-accent);
  --ac-select-btn-border-active: var(--color-primary-400); 
  --ac-select-btn-text-active: #FFFFFF;
}


:root {
  --ac-separator-padding-y: var(--spacing-xs, 4px);
  --ac-separator-color-light: var(--theme-bg-surface);
  --ac-separator-color-stroke: var(--theme-border-color);
}


:root {
  --ac-side-menu-padding: var(--spacing-xs, 4px);
  --ac-side-menu-bg: var(--theme-bg-body);
  --ac-side-menu-width: 48px; /* 4px + 40px icon + 4px */
  --ac-side-menu-gap: var(--spacing-sm, 8px);
  --ac-side-menu-transition: all 0.3s ease;
  --ac-side-menu-radius: var(--border-radius-sm, 8px);
  --ac-side-menu-border: 1px solid var(--theme-border-color);
}


:root, [data-theme="dark"] {
  --ac-side-menu-title-font-size: var(--font-size-sm, 14px);
  --ac-side-menu-title-color: var(--color-primary-300);
  --ac-side-menu-title-font-family: var(--heading-font, 'Merriweather', serif);
  --ac-side-menu-title-padding-x: var(--spacing-sm, 8px);
  --ac-side-menu-title-padding-y: var(--spacing-base, 16px);
}

[data-theme="light"] {
  --ac-side-menu-title-color: var(--color-primary-600);
}


:root {
  --ac-side-nav-bg: var(--theme-bg-body);
  --ac-side-nav-padding: 4px;
  --ac-side-nav-gap: 4px;
  --ac-side-nav-border-right: 1px solid var(--theme-border-color);
  
  --ac-side-nav-sidebar-width: 64px;
  --ac-side-nav-panel-width: 260px;
  --ac-side-nav-transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Responsive breakpoint - use global breakpoint or custom value */
  --ac-side-nav-breakpoint: var(--ac-breakpoint-tablet, 720px);
}


:root {
  /* Sizes - Default */
  --ac-switch-width: 44px;
  --ac-switch-height: 24px;
  --ac-switch-knob-size: 18px;
  --ac-switch-padding: 3px;
  --ac-switch-radius: 20px;

  /* Sizes - Small Variant */
  --ac-switch-small-width: 36px;
  --ac-switch-small-height: 20px;
  --ac-switch-small-knob-size: 14px;
  --ac-switch-small-inner-dot: 6px;

  /* Colors */
  --ac-switch-knob-bg: var(--color-white, #FFFFFF);
  
  /* Inactive State */
  --ac-switch-bg-inactive: var(--theme-border-color); /* Greyer background mapping */
  --ac-switch-border-inactive: var(--theme-text-muted); /* Softer outline */

  /* Active State */
  --ac-switch-bg-active: var(--color-primary-500, #0071F7);
  
  /* Disabled State */
  --ac-switch-opacity-disabled: 0.5;
  
  /* Focus State */
  --ac-switch-focus-ring: var(--theme-border-color-focus);

  /* Responsive: Tablet */
  --ac-switch-label-font-size-tablet: 13px;

  /* Responsive: Mobile */
  --ac-switch-label-font-size-mobile: 14px;
  --ac-switch-gap-mobile: 10px;
}


/* Tab Container Tokens */
:root, [data-theme="dark"] {
  --ac-tab-bg: var(--color-black-medium);
  --ac-tab-border-color: var(--color-black-light);
  --ac-tab-border-width: 2px;
  --ac-tab-radius: 999px; /* or 50% but 999px is safer for pills */
  --ac-tab-padding: 4px;
  --ac-tab-gap: 4px;
  --ac-tab-scroll-padding: 8px;
  --ac-tab-scrollbar-color: var(--color-black-stroke);

  /* Responsive padding */
  --ac-tab-padding-tablet: 3px;
  --ac-tab-padding-mobile: 2px;
  --ac-tab-scroll-padding-mobile: 6px;
}

[data-theme="light"] {
  --ac-tab-bg: var(--theme-bg-surface-hover);
  --ac-tab-border-color: var(--theme-border-color);
  --ac-tab-scrollbar-color: var(--theme-border-color);
}


/* Tab Button Tokens */
:root, [data-theme="dark"] {
  --ac-tab-btn-padding-x: 24px;
  --ac-tab-btn-padding-y: 8px;
  --ac-tab-btn-border-width: 1px;
  --ac-tab-btn-radius: 999px;

  /* Hover */
  --ac-tab-btn-bg-hover: var(--color-black-light);
  --ac-tab-btn-border-hover: var(--color-black-stroke);

  /* Active */
  --ac-tab-btn-bg-active: var(--theme-text-accent); 
  --ac-tab-btn-border-active: var(--color-primary-400); 
  --ac-tab-btn-text-active: #FFFFFF;

  /* Responsive: Tablet */
  --ac-tab-btn-padding-x-tablet: 18px;
  --ac-tab-btn-padding-y-tablet: 6px;
  --ac-tab-btn-height-tablet: 36px;
  --ac-tab-btn-font-size-tablet: 14px;

  /* Responsive: Mobile */
  --ac-tab-btn-padding-x-mobile: 14px;
  --ac-tab-btn-padding-y-mobile: 6px;
  --ac-tab-btn-height-mobile: 34px;
  --ac-tab-btn-font-size-mobile: 13px;
  --ac-tab-btn-gap-mobile: 6px;
}

[data-theme="light"] {
  --ac-tab-btn-bg-hover: var(--theme-bg-surface-active);
  --ac-tab-btn-border-hover: var(--theme-border-color-hover);
  --ac-tab-btn-bg-active: var(--theme-text-accent);
  --ac-tab-btn-border-active: var(--color-primary-400); 
  --ac-tab-btn-text-active: #FFFFFF;
}


/**
 * ac-table — CSS Custom Property Tokens
 * All tokens delegate to the global semantic theme variables.
 * Override any token at the component or page level as needed.
 */

:root {
  /* Wrapper */
  --ac-table-bg:            var(--theme-bg-surface);
  --ac-table-border:        var(--theme-border-color);
  --ac-table-radius:        var(--border-radius-sm, 8px);
  --ac-table-padding:       var(--spacing-base, 16px);

  /* Header row */
  --ac-table-header-bg:      var(--theme-bg-surface-active);
  --ac-table-header-text:    var(--theme-text-secondary);
  --ac-table-header-size:    var(--font-size-sm, 14px);
  --ac-table-header-weight:  600;
  --ac-table-header-padding: 12px 16px;

  /* Data rows */
  --ac-table-row-bg:          var(--theme-bg-surface);
  --ac-table-row-bg-hover:    var(--theme-bg-surface-hover);
  --ac-table-row-bg-striped:  var(--theme-bg-body);
  --ac-table-row-text:        var(--theme-text-primary);
  --ac-table-row-border:      var(--theme-border-color);
  --ac-table-row-padding:     12px 16px;
  --ac-table-row-height:      56px;
  --ac-table-row-size:        var(--font-size-sm, 14px);

  /* Empty state */
  --ac-table-empty-icon-color: var(--theme-text-muted);
  --ac-table-empty-text-color: var(--theme-text-muted);

  /* Loading skeleton */
  --ac-table-skeleton-bg:      var(--theme-bg-surface-active);
  --ac-table-skeleton-shimmer: var(--theme-bg-surface-hover);

  /* Responsive: Tablet */
  --ac-table-padding-tablet: 14px;
  --ac-table-empty-padding-tablet: 36px 20px;

  /* Responsive: Mobile */
  --ac-table-padding-mobile: 12px;
  --ac-table-empty-padding-mobile: 32px 16px;
}


:root {
  --ac-tooltip-bg: var(--theme-text-primary);
  --ac-tooltip-text: var(--theme-bg-body);
  --ac-tooltip-radius: var(--border-radius-xs, 4px);
  --ac-tooltip-padding: 6px 10px;
  --ac-tooltip-font-size: 12px;
  --ac-tooltip-z-index: 1000;
  --ac-tooltip-border: 1px solid transparent; /* No border for tooltip usually if contrast is high */
  --ac-tooltip-transition: opacity 0.2s ease, transform 0.2s ease;
}


/* ac-tutor-card tokens */

:root, [data-theme="dark"] {
  --ac-tutor-card-bg: var(--color-black-light);
  --ac-tutor-card-border-color: var(--color-black-stroke);
  --ac-tutor-card-radius: var(--border-radius-base, 16px);

  --ac-tutor-card-specialty-color: var(--color-primary-300);
  --ac-tutor-card-specialty-size: var(--font-size-xs, 12px);

  --ac-tutor-card-name-color: var(--color-white);
  --ac-tutor-card-name-size: var(--h5, 24px);
  --ac-tutor-card-name-font: var(--heading-font, serif);

  --ac-tutor-card-price-color: var(--color-white);
  --ac-tutor-card-price-size: var(--font-size-lg, 18px);

  --ac-tutor-card-desc-color: var(--color-white-medium);
  --ac-tutor-card-desc-size: var(--font-size-sm, 14px);

  --ac-tutor-card-rating-color: var(--color-white);
  --ac-tutor-card-rating-size: var(--font-size-sm, 14px);
  --ac-tutor-card-rating-bg: var(--color-black-medium);

  --ac-tutor-card-reviews-color: var(--color-white-dark);
  --ac-tutor-card-cta-color: var(--color-primary-400);
  
  --ac-tutor-card-width: 240px;
}

[data-theme="light"] {
  --ac-tutor-card-bg: var(--theme-bg-surface);
  --ac-tutor-card-border-color: var(--theme-border-color);
  --ac-tutor-card-specialty-color: var(--color-primary-600);
  --ac-tutor-card-name-color: var(--theme-text-primary);
  --ac-tutor-card-price-color: var(--theme-text-primary);
  --ac-tutor-card-desc-color: var(--theme-text-secondary);
  --ac-tutor-card-rating-color: var(--theme-text-primary);
  --ac-tutor-card-rating-bg: var(--theme-bg-surface-hover);
  --ac-tutor-card-reviews-color: var(--theme-text-muted);
  --ac-tutor-card-cta-color: var(--color-primary-600);
}