:root {
  /* =========================================================
     COLORS
  ========================================================= */

  --apariencia-primary: #4f46e5;
  --apariencia-primary-hover: #4338ca;

  --apariencia-secondary: #111827;
  --apariencia-secondary-hover: #0f172a;

  --apariencia-success: #10b981;
  --apariencia-warning: #f59e0b;
  --apariencia-danger: #ef4444;

  --apariencia-surface: #ffffff;
  --apariencia-surface-secondary: #f8fafc;

  --apariencia-background: #f3f4f6;

  --apariencia-border: #e5e7eb;

  --apariencia-text: #111827;
  --apariencia-text-muted: #6b7280;
  --apariencia-text-white: #ffffff;

  /* =========================================================
     TYPOGRAPHY
  ========================================================= */

  --apariencia-font-family: 'Inter', sans-serif;

  --apariencia-font-size-xs: 11px;
  --apariencia-font-size-sm: 12px;
  --apariencia-font-size-md: 14px;
  --apariencia-font-size-lg: 16px;
  --apariencia-font-size-xl: 18px;
  --apariencia-font-size-2xl: 22px;

  --apariencia-font-weight-normal: 400;
  --apariencia-font-weight-medium: 500;
  --apariencia-font-weight-semibold: 600;
  --apariencia-font-weight-bold: 700;

  --apariencia-line-height-sm: 1.3;
  --apariencia-line-height-md: 1.5;
  --apariencia-line-height-lg: 1.7;

  /* =========================================================
     RADIUS
  ========================================================= */

  --apariencia-radius-xs: 6px;
  --apariencia-radius-sm: 10px;
  --apariencia-radius-md: 14px;
  --apariencia-radius-lg: 18px;
  --apariencia-radius-xl: 24px;
  --apariencia-radius-full: 999px;

  /* =========================================================
     SHADOWS
  ========================================================= */

  --apariencia-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);

  --apariencia-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);

  --apariencia-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08);

  --apariencia-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);

  /* =========================================================
     SPACING
  ========================================================= */

  --apariencia-space-02: 2px;
  --apariencia-space-04: 4px;
  --apariencia-space-06: 6px;
  --apariencia-space-08: 8px;
  --apariencia-space-10: 10px;
  --apariencia-space-12: 12px;
  --apariencia-space-14: 14px;
  --apariencia-space-16: 16px;
  --apariencia-space-18: 18px;
  --apariencia-space-20: 20px;
  --apariencia-space-24: 24px;
  --apariencia-space-28: 28px;
  --apariencia-space-32: 32px;

  /* =========================================================
     TRANSITIONS
  ========================================================= */

  --apariencia-transition-fast: all 0.18s ease;

  --apariencia-transition-normal: all 0.28s ease;

  --apariencia-transition-slow: all 0.4s ease;

  /* =========================================================
     Z INDEX
  ========================================================= */

  --apariencia-z-base: 1;
  --apariencia-z-dropdown: 50;
  --apariencia-z-sticky: 100;
  --apariencia-z-overlay: 200;
  --apariencia-z-drawer: 300;
  --apariencia-z-modal: 400;
  --apariencia-z-toast: 500;

  /* =========================================================
     PREVIEW
  ========================================================= */

  --apariencia-preview-sidebar-width: 88px;

  --apariencia-preview-header-height: 74px;

  --apariencia-preview-phone-width: 360px;

  --apariencia-preview-phone-height: 720px;

  /* =========================================================
     BUTTONS
  ========================================================= */

  --apariencia-button-height-sm: 36px;
  --apariencia-button-height-md: 42px;
  --apariencia-button-height-lg: 48px;

  /* =========================================================
     INPUTS
  ========================================================= */

  --apariencia-input-height: 46px;

  --apariencia-input-padding-x: 14px;

  /* =========================================================
     CARDS
  ========================================================= */

  --apariencia-card-padding: 16px;

  --apariencia-card-gap: 14px;

  /* =========================================================
     DRAWERS
  ========================================================= */

  --apariencia-drawer-width: 520px;

  /* =========================================================
     TABLES
  ========================================================= */

  --apariencia-table-row-height: 52px;

  /* =========================================================
     BADGES
  ========================================================= */

  --apariencia-badge-height: 28px;

  /* =========================================================
     LOGOS
  ========================================================= */

  --apariencia-logo-max-width: 220px;

  --apariencia-logo-max-height: 120px;
}