:root {
  /* ── Marca — paleta violeta StikMatch (logo oficial) ── */
  --brand-primary:      #7C5CE6;   /* violeta principal */
  --brand-primary-dark: #4A35C0;   /* violeta oscuro (gradientes) */
  --brand-green:        #7C5CE6;   /* alias — todos los elementos UI de marca */
  --brand-blue:         #5B9CF6;   /* azul acento del logo */
  --brand-amber:        #F59E0B;
  --brand-red:          #E24B4A;

  /* ── Estados de sticker — colores funcionales (independientes de marca) ── */
  --color-owned:    #22C77A;   /* verde = tengo la figurita */
  --color-repeated: #F59E0B;   /* ámbar = repetida */
  --color-missing:  transparent;

  /* ── Fondo — modo claro ── */
  --bg-base:    #f8f8fc;
  --bg-subtle:  #f0f0f7;
  --bg-card:    #ffffff;
  --bg-overlay: rgba(124, 92, 230, .04);

  /* ── Texto ── */
  --text-primary:   #1a1a2e;
  --text-secondary: #555568;
  --text-tertiary:  #8888a0;

  /* ── Bordes ── */
  --border-light:  #e4e4f0;
  --border-medium: #cecede;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 3px rgba(60,40,150,.08);
  --shadow-md: 0 4px 12px rgba(60,40,150,.12);
  --shadow-lg: 0 8px 24px rgba(60,40,150,.16);

  /* ── Radios ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Tipografía ── */
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-size-base: 16px;

  /* ── Transiciones ── */
  --t-fast:  150ms ease;
  --t-base:  250ms ease;
  --t-slow:  400ms ease;
}

[data-theme="dark"] {
  --bg-base:    #0E0E14;   /* navy oscuro con tinte violeta */
  --bg-subtle:  #16161F;
  --bg-card:    #16161F;
  --bg-overlay: rgba(124, 92, 230, .06);
  --text-primary:   #f0f0f7;
  --text-secondary: #9090a8;
  --text-tertiary:  #606078;
  --border-light:   #28283a;
  --border-medium:  #38384e;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.55);
}