:root {
  /* === Colores === */
  --chk-bg: #f6f6f6;
  --chk-surface: #ffffff;
  --chk-text: #111111;
  --chk-text-muted: #6c6c6c;
  --chk-border: #e5e5e5;
  --chk-primary: #0f5c3b;
  --chk-primary-light: #0eaf6a;
  --chk-accent: var(--chk-primary);
  --chk-dark: #111111;
  --chk-danger: #dc3545;
  --chk-warning-bg: #fff3cd;

  /* === Spacing === */
  --chk-space-xs: 4px;
  --chk-space-sm: 8px;
  --chk-space-md: 16px;
  --chk-space-lg: 24px;
  --chk-space-xl: 32px;

  /* === Border radius === */
  --chk-radius-sm: 8px;
  --chk-radius-md: 10px;
  --chk-radius-lg: 16px;
  --chk-radius-full: 999px;

  /* === Sizing === */
  --chk-btn-h: 36px;
  --chk-input-h: 40px;
  --chk-drawer-width: 360px;
  --chk-preview-width: 360px;

  /* === Typography === */
  --chk-font-xs: 0.75rem;   /* 12px — solo para hints */
  --chk-font-sm: 0.8125rem; /* 13px — labels secundarios */
  --chk-font-base: 0.875rem; /* 14px — body text, inputs */
  --chk-font-md: 1rem;       /* 16px — body default */
  --chk-font-lg: 1.25rem;    /* 20px — card titles */
  --chk-font-xl: 1.6rem;     /* 25.6px — page titles */

  /* === Z-index scale === */
  --chk-z-dropdown: 100;
  --chk-z-sticky: 200;
  --chk-z-drawer: 500;
  --chk-z-modal: 1000;
  --chk-z-toast: 1500;

  /* === Shadows === */
  --chk-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --chk-shadow-md: 0 8px 20px rgba(0,0,0,0.06);
  --chk-shadow-lg: 0 12px 30px rgba(17,17,17,0.12);

  /* Aliases (backwards compat) */
  --bg: var(--chk-dark);
  --panel: var(--chk-surface);
  --muted: var(--chk-text-muted);
  --border: var(--chk-border);
  --accent: var(--chk-text);
  --preview-width: var(--chk-preview-width);
  --chk-muted: var(--chk-text-muted);
  --chk-primary-strong: var(--chk-primary-light);
  --chk-link: var(--chk-primary);
}