:root {
  color-scheme: dark;

  /* Superficies */
  --bg: #0e0e11;
  --surface-1: #16161a;
  --surface-2: #1d1d22;
  --surface-3: #26262c;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);

  /* Texto */
  --text: #f4f4f5;
  --text-dim: #b4b4be;
  --text-muted: #8b8b96;

  /* Marca y estados */
  --primary: #e8732a;
  --primary-hover: #f0873f;
  --primary-press: #cf6220;
  --primary-soft: rgba(232, 115, 42, 0.14);
  --primary-soft-strong: rgba(232, 115, 42, 0.24);
  --danger: #f0483a;
  --danger-soft: rgba(240, 72, 58, 0.14);
  --ok: #43b581;

  /* Tipografia */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  /* Espaciado */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* Forma y elevacion */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 16px rgba(0, 0, 0, 0.45);
  --elev-3: 0 16px 48px rgba(0, 0, 0, 0.55);
  --scroll-thumb: rgba(232, 115, 42, 0.55);
  --scroll-thumb-hover: rgba(232, 115, 42, 0.85);
}